less即学即用------知识储备

前言

前两天去找工作了，年前招聘的不多了，还碰上外包的，还有个卖药的。好吧，我就不吐槽了。我还是乖乖修炼内功，年后找个合适的工作吧。
直入主题less-css预处理语言，有变量、混合、匹配、运算、嵌套、等方法，第一次接触less是因为bootstrap，当时跟着老师看了看官方文档。现在决定自己动手用一用。

知识储备

1. 变量

@color：#ccc;
好吧，这就是变量，让css像js一样，不用记住复杂的内容，记住变量名就可以了，方便了书写，同时提高了复用性。
同时变量还可以进行加减乘除的运算，其运算法则跟数学的一样。

2. 混合

less书写比css随意方便了许多、例如：

.item{
font-size:14px;
line-height:30px;
}
.item2{
font-size:14px;
line-height:30px;
color:#ccc;
}

使用less:

.item{
font-size:14px;
line-height:30px;
}
.item2{
.item;//将直接加入.item的内容
color:#ccc;
}

混合还可以加入参数：

.item(@h:30px){
font-size:14px;
line-height:@h;
}
.item2{
.item();//将直接加入.item的内容
color:#ccc;
}

3. 匹配模式

有点类似与js的if, 一个函数适用于不同情况。@_适用于所有情况，其他情况下请对号入座。还是举个栗子吧，

以三角形为例，匹配模式可以匹配三角上下左右四种模式，从而形成方向为上下左右的不同三角形，同时无论选择哪种模式，或者选择一种四者都不是的模式，@_下的css都会执行。

.sanjiao(top,@c:#ccc,@h:10px){
        border:@h;
        border-color:@c transparent transparent transparent;
        border-style:solid dashed dashed dashed;
}
.sanjiao(bottom,@c:#ccc,@h:10px){
        border:@h;
        border-color: transparent transparent @c transparent;
        border-style:dashed dashed solid dashed;
}
.sanjiao(left,@c:#ccc,@h:10px){
        border:@h;
        border-color:transparent @c transparent transparent;
        border-style:dashed solid dashed dashed;
}
.sanjiao(right,@c:#ccc,@h:10px){
        border:@h;
        border-color:transparent transparent transparent @c ;
        border-style:dashed dashed dashed solid;
}
.sanjiao(@_,@c:#ccc,@h:10px)){
        width:0px;
        height:0px;
        overflow:hidden;
}

//使用
.top{
.sanjiao(top);
}

4.嵌套模式

像html一样可以嵌套。

ul{}
ul li{}

less可以写成

ul{
     color:#ccc;
     li{
           float:left;
    }    
}

注意：嵌套层数并非越多越好。保证准确的情况下尽量减少嵌套层数。

eg:clearfix的写法

.clearfix(){
        &:after{
        content:'';
        display:block;
        clear:both;
}
zoom:1;
}

5. @arguments可以代替所有传递进来的参数，也可以被覆盖

Paste_Image.png

6. 避免编译、@important、

6.1 有些时候代码不需要编译，可以使用~"代码"来避免编译。

.test{
width:~'calc(300px-30%)';//~''避免编译''
}

6.2!important 最高优先级 用来测试

.test_important{ .border_03() !important } 最高优先级

7. 文件的相互引用

可以把封装的东西放到一个单独的 less里面，只需要在main.less主文件里面 @import 加文件名 xx 可以省略后缀名.加载css需要 @import(less)'xxx.css' 换汤不换药 还是css那一套加载方式，放到哪里就在哪里加载，样式表！

Paste_Image.png