less 入门

一、特性

1、less中的注释

可以使用/**/也可使用//

2、变量

使用@来定义一个变量，比如

@test_width:300px

3、混合

可以将一个元素中多个的的样式写在一起，比如

我定义了一个边框的样式为border

.border{

    border:solid 5px yellow

}

我可以在不同的私房去使用这个边框的样式比如

.box{

   width:300px;

    height:300px;

    background-color:blue;

    .border;

}

.box2{

    .box;

    margin-left:100px

}

 

此外，还可以往里面传入参数

比如

.border_02(@border_width){

    border:solid yellow @border_width;

}

然后再使用它的地方传入特定的参数

.test_hunhe{

    .border_02(50px)

}

 

还可以设定默认值

.border_03(@border_width:10px){

    border:solid yellow @border_width;

}

 

那么此时如果不传入参数，就会使用默认的参数10px，如果传入一个参数就会覆盖掉这个参数。

 

4、匹配模式

相当于js中的if，需要满足条件的才会执行

 

用css写一个三角形

.triangle{

    width:0;

    height:0;

    overflow:hidden;

    border-width:10px;

    border-color:transparent transparent red transparent;

    border-style:dashed dashed solid dashed;

}

 

但是我想，根据我传进来的参数来决定，这个三角形的朝向

那么就可以使用匹配模式来选择

比如

.triangle(top){

border-color:transparent transparent red transparent;

border-style:dashed dashed solid dashed;

}

.triangle(bottom){

border-color: red transparent transparent transparent;

border-style: solid dashed dashed dashed;

}

.triangle(left){

border-color: transparent transparent transparent red;

border-style: dashed dashed dashed solid;

}

.triangle(right){

border-color:red  transparent transparent transparent;

border-style: solid dashed dashed dashed;

}

.triangel(@_){

width:0;

    height:0;

    overflow:hidden;

    border-width:10px;

}

 

那么以后我就可以自己选择哪个三角形了，比如

.sanjiao{

    .triangle(top)

}

 

5、运算

可以在值上面进行相应的数学运算

@test_width:300px

.box_02{

    width:@test_width*5

}

 

6、嵌套（嵌套层级中尽量写少一点层级（style查找样式树需要时间，影响性能。））

 

比如像下面这样的一个dom结构

<ul class="list">

    <li><a href="#"> 哈哈哈 </a> <span>2019-09-02</span></li>

    <li><a href="#"> 哈哈哈 </a> <span>2019-09-02</span></li>

    <li><a href="#"> 哈哈哈 </a> <span>2019-09-02</span></li>

    <li><a href="#"> 哈哈哈 </a> <span>2019-09-02</span></li>

    <li><a href="#"> 哈哈哈 </a> <span>2019-09-02</span></li>

</ul>

 

按css的写法，如果需要匹配li a span 那么就要写成.list li,list li a ,list li span

多个匹配的写法，那么在less里面就可以写成下面的这个样子

.list{

    li{

    }

    a{}

    span{}

 

}

 

7、@arguments 变量

@arguments包含了所有传递进来的参数。

 

比如刚刚那个boder，直接传入@arguments就可以将所有的参数一起使用了

.border_arg(@w:30px,@c:red,@xx:solid){

    border:@arguments

}

 

8、避免编译

如果输入一些困难不能被less识别的语法，可以在前面加上~然后再在后面加上该值（加引号）

 

9、选择器的写法

比如:hover的写法

.span{

    &:hover{

}

}