css与less的关系类似于js与JQ的关系

  • 注释 :
  1. /*注释会被编译*/  

     //注释不会被编译

  • 变量:

    定义格式:@变量名:值;

  • 混合:

    将less一个元素{}样式中添加其他元素的样式,在css中编译结果中复制了添加的样式。

    混合样式中可带参数。

    混合样式中的参数可带默认值。

@box_width:300px;

.box{
    width:@box_width;
    height:@box_width;
    background:yellow;    

    .border;  //混合
}
.border{
     border:5px solid pink;
}

.box2(@border_width:20px){
    border:solid yellow @border_width;  
}
  • 匹配模式 将一些作用效果模块化,使得在使用的时候可以直接调用

  下面是一个关于三角形的匹配模式

//匹配模式
.trangle(top,@w:5px,@c:#ccc){
    border-width:@w;
    border-color:@c transparent transparent transparent;        //上、左、下、右
    border-style:solid dashed dashed dashed;    //处理IE中黑色背景
}
.trangle(left,@w:5px,@c:#ccc){
    border-width:@w;
    border-color:transparent @c transparent transparent;        //上、左、下、右
    border-style:dashed solid dashed dashed;    //处理IE中黑色背景
}
.trangle(bottom,@w:5px,@c:#ccc){
    border-width:@w;
    border-color:transparent transparent @c transparent;        //上、左、下、右
    border-style:dashed dashed solid dashed;    //处理IE中黑色背景
}
.trangle(right,@w:5px,@c:#ccc){
    border-width:@w;
    border-color:transparent transparent transparent @c;        //上、左、下、右
    border-style:dashed dashed dashed solid;    //处理IE中黑色背景
}
.trangle(@_,@w:5px,@c:#ccc){
    width:0;
    height:0;
    overflow:hidden;
}
  • 变量运算

   如下代码:@a -10;表达式中只要存在一个数含有单位即可。

  在@a - 10;运算中,a与 -运算之间必须隔一个空格。

@a:100px;

.box{
   width:@a -10;     //90px;
   color:#ccc-10;     //#c2c2c2       
}
  • 嵌套

    

<ul class="list">
        <li><a href="">这是一段测试文字</a><span>2017/11/08</span></li>
        <li><a href="">这是一段测试文字</a><span>2017/11/08</span></li>
        <li><a href="">这是一段测试文字</a><span>2017/11/08</span></li>
        <li><a href="">这是一段测试文字</a><span>2017/11/08</span></li>
</ul>
.list{
    width:600px;
    margin:30px auto;
    padding:0;
    list-style:none;
    li{
        height:30px;
        line-height:30px;
        background-color:pink;
        margin-bottom:5px;
    }
    a{
        float:left;
    }
    span{
        float:right;
    }
}

  运行效果:

   注意嵌套与混合的区别:嵌套是针对元素一级级的嵌套,混合是对样式的重复使用。

       对于伪类选择器,同样可以使用嵌套:其中 &表示上一级选择器

   

.list{
    list-style:none;    
  
    &:hover{
    
}    
}