less新手入门

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{
    
}    
}