less

Posted 2020-08-22

在遇到less之前，一直和css交往，当less出现在我码农生涯的时候，被她给深深地吸引。从此，less成了自己码农生活里面的一房，css退居二房！那么，less到底有什么魅力让我如此迷上她呢？

less初识

Less是一门CSS预处理语言，它扩展了CSS 语言，为CSS赋予了动态语言的特性，增加了变量、Mixin、函数等特性，使CSS 更易维护和扩展。

Less可以运行在node或者浏览器端，对于初学者来说，使用第三方编辑器考拉Koala来学习less

Koala

　　安装Koala → 打开Koala → 面板添加CSS文件夹（先在里面创建.less文件） → 选中.less文件 → 右侧编译选项，默认自动编译 → 选中Refresh（生成相应CSS文件） → 用编辑器打开less文件，实现CSS编写 → 自动生成CSS文件

less语法

变量

　　在页面中，需要重复使用或者后期需要修改的样式提前出来，写成变量。该变量可是一个边框样式、内容样式、像素值……

　　格式：@varablename:value ；

　　less中声明变量使用 @ 符号，且变量不会被编译css文件中；

less文件清单：

@f_color:#ffffff;          　　 //声明一个背景颜色变量
div{
　　background-color:@f_color;  //使用变量
}

编译后css文件清单：

div{
　　background-color:#ffffff;
}

说明：若后期需要修改背景颜色，直接在less中修改变量的值就可以实现，不需要去动css文件。

 

嵌套规则

　　less中可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量和给特定元素添加clss和id，使得代码看起来更加的清晰。

（1）基本用法

less文件清单：

@f_color:#ffffff;　　　　//声明一个背景颜色变量
div{
　　width:50px;
　　height:50px;
　　span{　　　　　　　　 //div中包含子元素span
　　　　display:inline-block;
　　　　background-color:@f_color;
　　}
}

编译后css文件清单：

div{
　　width:50px;
　　height:50px;
}
div span{
　　display:inline-block;
　　background-color:#ffffff;
}

（2）嵌套一个类

　　该类是html里面className，会在css文件中输出，若html结构中存在该类名，则该类的样式会起作用

less文件清单：

.cur{ 　　　　　　
　　width:50px;
　　height:50px;
}
.wrap{　　　　　　　　 //嵌套类
　　.cur;
}

编译后css文件清单：

.cur{
　　width:50px;
　　height:50px;
}
.wrap{
　　width:50px;
　　height:50px;
}

注：这里的关系比较复杂，在后面混入有详细介绍

（3）选择器继承

　　less中的“&”符号在嵌套规则中是指引用上层（父级）选择器，在伪类选择器和伪元素上用的比较多；
　　less中使用继承时，如果在声明块内书写$，尽量写在开头；

less文件清单：

div{
　　&:hover{　　　　　　　　　　　　 //表示div在hover的时候改变背景色
　　　　background-color:orange;
　　}
　　background-color:green;
}

编译后css文件清单：

div{
　　background-color:green;
}
div:hover{
　　background-color:orange;
}

 

混入Mixin

(1)直接在目标位置混入另一个类样式（无参数混入）

　　a>混入名称后面不加（）的情况

　　这种情况下，cur作为一个html的类名className，即使不被调用也会被输入到css中

less文件清单：

.cur{ 　　　　　　　　　　//cur是一个类名clssName
　　background-color:red;
}
div{
　　.cur;
}

css文件清单：

.cur{ 　　　　　　　　　　　　//css文件中也输出该样式
　　background-color:red;
}
div{
　　background-color:red;
}

　　b>混入名称后面加上（）的情况
　　　　这种情况下，定义的混入类样式，不会在css中输出，只会存在与less文件中；小括号()内可以加参数，也可以不加　　

less文件清单：

.cur(){ 　　　　　　　　　　//定义不需要输出的混入类样式
　　background-color:red;
}
div{
　　.cur();
}

css文件清单：

div{
　　background-color:red;
}

对于混入的最佳实践：

　　a> 不直接使用混入已有类样式的方式，也就是第一种方式不加（）的混入；
　　b> 先定义混入类样式，然后在需要输出的类样式中直接进行混入该样式；
　　c> 混入时必须加上()来表明这不是一个clssName；

(2)定义一个不输出的样式，在目标位置混入（带参数混入）

　　a> 这种情况下，可以给参数设置默认值，如果在后面混入类样式的时候，需要修改该参数的值，则分下面两种情况：

　　　单个参数，可以直接写参数的值；
　　　多个参数，如需全部重新配置，可以直接依次写参数值；如是只某个配置，必须加上变量名；

　　b> 混入类样式的参数分隔符使用，和；均可，但在同一项目中必须保持统一；

less文件清单：

.br(@w:2px ; @c:red){ 　　　　//这里参数之间采用”；“，也可以采用“，“
　　border:@w solid @c;
}
div{
　　width:50px;
　　height:50px;
　　.br(@c:green); 　　　　  // 只配置了一个参数的值,其他采用默认值
}

编译后css文件清单：

div{
　　width:50px;
　　height:50px;
　　border:2px solid green;
}

 

四则运算

　　less针对css中数值型的value（数字、颜色、变量等）提供了可以加减乘除的四则运算功能，便于我们处理这类数值之间关系；
less文件清单：

@w:100px ;
@c:#444444;
box1{
　　width:@w;
　　height:@w /2 ;
　　color:@c / 2 ;
}
box2{
　　width:@w + 20 ;
}

css文件清单：

box1{
　　width:100px;
　　height:50px;
　　color:#222222;
}
box2{
　　width:120px;
}

特别说明：计算过程中可以不管单位，less会自动判断；另外，在颜色进行运算的时候，小心踩坑！如#4f25c7，通常不建议对颜色进行运算；

 

LESS大战浏览器私有前缀

　　这是爱上less原因之所在，以前在写css的时候，一旦用到css3中新增的属性，都要写上各大浏览器厂商的私有前缀，严重扯到项目开发的蛋！less的出现就填了这坑，以圆角为例直接上代码！

less文件清单：

.b_radius(@r:10px){ 　　　　　　//定义一个圆角混入样式
　　-webkit-border-radius: @r;
　　-moz-border-radius: @r;
　　-ms-border-radius: @r;
　　-o-border-radius: @r;
　　border-radius: @r;
}
div{
　　.b_radius(60%);         //这里我就没有带上参数名，因为一个参数，就直接上参数值
}

 css文件清单：

div{
　　-webkit-border-radius: 60%;
　　-moz-border-radius: 60%;
　　-ms-border-radius: 60%;
　　-o-border-radius: 60%;
　　border-radius: 60%;
}

 特别说明：只需在less文件中定义一次，在需要圆角属性的输出样式中直接混入该类样式即可，速度、效率那是杠杠的！

匹配模式

　　匹配模式？简单说就是只要满足某个样式就能调用那个样式，有点if语句的味道吧，以css画小三角为例；

less文件清单：

.triangle(right;@w:20px;@c:red){     　　 //定义右三角样式
　　border:@w solid transparent;
　　border-left:@w solid @c;
　　border-style: dashed solid dashed dashed;
}
.triangle(left;@w:20px;@c:red){　　　　   //定义左三角样式
　　border:@w solid transparent;
　　border-left:@w solid @c;
　　border-style: dashed dashed dashed solid;　　 //这里是为了解决IE6下出现的黑色边
}
.sanjiao{
　　width:0; 
　　height:0;
　　overflow:hidden;
　　.triangle(right);       　　　　　　　　//根据需要（画右三角形）调用上面定义的混入类样式
}

 css文件清单：

.sanjiao { 　　　　　　　　　　　　　　　　　　//画出向右的三角，因为只匹配right这个混入样式
　　border: 20px solid transparent;
　　border-left: 20px solid #ff0000;
　　border-style: dashed solid dashed dashed;
　　width: 0;
　　height: 0;
　　overflow: hidden;
}

说明：很方便吧，上面定义完混入样式，只要在需要三角形的输出样式中直接调用就能画出我们需要的三角形，是不是就完美了呢？没！没！！

匹配模式之爱我你就带上我

　　上面代码有个不足，就是每次我们在页面上其他部分要画三角形时，都得重新写三个小可爱：

width: 0;
height: 0;
overflow: hidden;

　　有没有解决办法呢？有！
　　在上面less文件清单中定义混入样式的时候，只要在加上下面这个样式，就完美咯！！

.triangle(@_,@w:20px;@c:red){ 　　　　　　　　//注意这里的@_
　　width:0; 
　　height:0;
　　overflow:hidden;
}

　　这时候只要在less文件清单中向下面这样调用混入样式也能达到上面的效果，看看代码，少了不少吧！！！

.sanjiao{
　　.triangle(right);
}

　　为什么呢？

　　@_参数，告诉我们每次在调用混入样式时，都要把具有@_参数混入样式里面的属性都带上！

　　@_参数是less的固定用法，记住就好！！

　　注：后面的参数也必须带上且与.triangle（）的参数相同，要不然后果很严重！

　　

注释

　　less的注释可以分为三种：

　　　（1）标准css注释：/*shadow*/,这种注释会保留到编译后的css文件；
　　　（2）单行注释：//,这种注释只保留在less源文件中，不会出现在编译css文件中；
　　　（3）重要注释：/*! @版权归shadow所有*/,这种注释即使css文件压缩也会保留，通常只有在声明版权的时候用，很少用；

　 最佳实践：在实际开发，由于后期维护在less文件上进行，因此，没有必要把全部注释输入到css文件中，常采用单行注释://

@import导入

　　@import 对于模块化开发来说非常有帮助！

　　实际开发中，通常有好几个less文件，但是产品上线的时候，都会合并为一个less文件进行编译，如：
　　　　（1）有文件rest.less/detial.less/index.less ……
　　　　（2）在index.less导入文件rest.less/detial.less,则可在index.less文件的头部：

@import “rest.less”;
@import “detial.less”;

　　　　（3）这里可以去掉文件名后缀，通常不建议这么做

注：less的函数部分在此处不做介绍，如有需要请上less官网查看，http://lesscss.cn/；

 

less参考资料网址：http://efe.baidu.com/blog/revisiting-css-preprocessors/；

　　　　 　 https://github.com/ecomfe/spec/blob/master/less-code-style.md；

koala下载地址：http://koala-app.com/index-zh.html；

本文属于自己学习总结，仅供参考，希望对你的学习有用！如有不足之处，还望请你提出宝贵的意见，我将在第一时间更改！谢谢！！