less预编译语言使用总结

Posted 2020-10-31 learnings

以前就使用过less和sass，其实很简单，就是很长时间不用，忘记语法了，现在来总结一片使用技巧

一、注释

less的注释不会被编译到css文件中，所以提倡多使用less中的注释：/**/

二、变量

less语言中也有自己的变量，定义变量@变量名：变量值，使用该变量时，直接@变量名，就是该变量值

@width: 300px;

body { background-color: white; }

.div1 { width: @width; }

三、混合（mixin）

混合可以将一个定义好的class A轻松引入到另一个class B中，从而简单实现class B继承class A中所有属性，还可以带参数地调用。

例如定义一个样式类.border，直接用到另一个样式类.box中，另一个样式类就很方便的具有了这个类的样式，很好的实现了css代码的复用；

再例如有一个.box2，它和.box有一些属性相同，那就直接继承.box再做特定的修改即可：

.border{

　　border:1px solid black;

}

.box{

　　.border;

}

.box2{

　　.box;

　　margin:20px;

}

混合（mixin）：可带参数，以实现传入变量参数来用一个样式类生成各种不同的样式：

.border2(@border_width){   //定义变量参数

　　border:@border_width solid black;

}

.box3{

　　.border2(5px);//参数位置传入变量以控制不同的样式

}

.box4{

　　.border2(10px);

}

混合（mixin）参数可带默认值（多个参数之间使用逗号隔开）

.border3(@border_width2:5px){

　　border:@border_width2 solid black;

}

.box5{

.border3();

}

一些常见的兼容性写法就可以用混合封装起来进行简化：

.border_radius(@border_radius:2px){

border-radius:@border_radius;

-moz-border-radius:@border_radius;

}

四、模式匹配

有些情况想根据传入的参数来改变混合的默认呈现，比如：

下面通过less模式匹配，定义不同央视模式的三角（top模式和bottom模式），但无论哪种模式，@_（放在模式参数位置）定义的样式所有模式都公有

.triangle(@_,@w,@c){

　　width:0;

　　height:0;

　　overflow:hidden;

}

.triangle(top,@w,@c){

　　border-width:@w;

　　border-color:transparent transparent @c transparent;

　　borser-style:dashed dashed solid dashed;

}

.triangle(bottom,@w,@c){

　　border-width:@w;

　　border-color:transparent transparent @c transparent;

　　borser-style:solid dashed dashed dashed;

}

.triangle2{

　　.trangle(bottom,20px,red);

}

.triangle3{

　　.trangle(top,30px,green);

}

五、运算（对变量进行加减乘除等）

@box_width:100px;

.box6{

　　width:(@box_width-10)*2;

}

六、嵌套

可以在一个选择器中直接潜逃另一个选择器来实现继承，这样很大程度减少代码量，并且代码看起来结构更清晰：

.list1{

　　width:600px;

　　height:600px;

　　li{//相当于在外边写.list1 li{}

　　　　height:20px;

　　　　a{

　　　　　　float:left;

　　　　　　&:hover{   //&代表上一层选择器，所以这样写相当于 .list1 a:hove{}

　　　　　　　　color:red;

　　　　　　}

　　　　}

　　}

}

七、@arguments

@arguments包含了所有传递进来的参数，如果你不想单独处理每一个参数的话就可以像这样写：

.box-shadow(@x:0;@y:0,@blur:1px,color:#000){

　　box-shadow:@arguments;   //相当于（）参数里的值放到了这

　　-moz-box-shadow:@auguments;

　　-webkit-box-shadow:@arguments;

}

.box-shaow(2px,5px);

八、避免编译

有时候需要输出一些不正确的css语法或者使用一些less不认识的专有语法

//要输出这样的值我们可以在字符串前加一个~

.class1{

　　filer:~"ms:alwaysHasItsOwnSyntax.For.Stuff()";

}

 

 完整的Less中文文档： 
http://www.bootcss.com/p/lesscss/