Less

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言, 它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。

CSS 预处理语言主流为三种：Sass，Less， Stylus。

• Sass：最早也是最成熟的 CSS 预处理器

• Less：简单和兼容 CSS

• Stylus：在广泛的意义上人气还不如 Sass 和 Less

为什么要对 CSS 进行预处理

CSS 的低复用性，冗余的代码写法其实很让人头疼。如果需要写的 CSS 样式代码不多还好，一旦代码多起来，就会非常繁重，书写模块化开发中需要写很多重复的选择器。

语法不够强大，对于后期的管理和维护十分不友好，可能要从一堆代码中找到你要维护的地方。

没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护

快速学习 Less

安装

对于项目中less的安装，可以使用npm等包管理工具进行安装，也可以通过其他方式使用。

之前我曾推荐使用vs code的插件 Easy Less 来使用， 可以参考文章：《Vs Code快速使用Less，省略配置》 。 也可以参考官方安装方法：http://lesscss.cn/#using-less-installation

这里对于安装less就不做过多的描述了

变量（Variables）🐪

普通属性值定义

为了方便开发者，less中存在变量属性，有些类似于 CSS 自定义属性（--*），具体可见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*

less的变量定义写法：@ + 变量名

例子：

@width: 50%;@height: @width * 1.5;@color: #c7d63e;#app {    width: @width;    height: @height;    background-color: @color;}

属性名和类名

这里的变量也都能够进行复用，当然变量不仅仅能够设定属性值，也可以设定属性名和类名，在使用时需要这样用@{变量名}。

@m: margin;  // 属性名：margin@p: padding;  // 属性名：padding@mp: marpad; // 设定类名
.@{mp} {    @{m}: 40px;    @{p}: 10px 20px 30px 40px;}

这里转换后就是正常的marpad的margin和padding属性设置了：

.marpad {  margin: 40px;  padding: 10px 20px 30px 40px;}

注意： 这里对于类名通常很少会通过变量设定，因为

1. 在less存在嵌套作用域等方法，类名也不需要过多定义

2. 类名的定义通常也非常直接，通过驼峰等方式也可以与变量一样简单理解。

至于属性名等则是看个人了，如果觉得想少写些，可以用m等简写来代替margin

变量延迟加载

less的变量延迟加载我觉得也可以叫做变量提升。

在JavaScript中存在变量提升和函数提升的概念，JavaScript 存在变量作用域，而less中也存在作用域。在less的变量延迟更加类似于函数提升。

js 示例：大家可以自己写一写下面的代码会输出哪两个值

function a11() {    console.log(5);}a11();function a11() {    console.log(3);}
function k() {    a11();    function a11(){        console.log(7);    } }k();

这里会输出 3 和 7。 在方法执行时，会优先查找同级作用域下的方法，并且函数提升会将函数声明提升到最前面（函数表达式不会提升），所以外部的 a11()会先执行输出 3，而不是 5。 k 函数内部的 a11 会优先执行同级作用域下的方法，输出 7。

来看看less中类似的：

@a11: 5px;.a {    width: @a11;}@a11: 3px;
.k {    .b {        width: @a11;    }    @a11: 7px;}

转换后 CSS：这里同级作用域下的 @11 被提升到使用之前了，所以.a 中就会为 3px。 同级作用域优先，.b 中为 7px

.a {  width: 3px;}.k .b {  width: 7px;}

混合（Mixins）🐫

这是将一组属性从一个规则集混入到另一个规则集的方法。

举个例子

在开发中，常常会遇到显示文字过长的情况，这时我们可以设置文字超出变成省略号。 使用的语句如下：

white-space: nowrap;text-overflow: ellipsis;overflow: hidden;

但是当项目足够大时，文字过长的情况就会很多，如果每次都写这三句，也会觉得很麻烦（本懒人如此）

普通混合

所以在less中的混入特性就非常方便了， 可以直接先定义好一个超出隐藏的 class，在需要的元素下通过.类名;的方式就能够将事前定义好的类属性也在该元素下施行。这种就属于简单的使用混合。

文字过长变省略号类:overflowText， app元素使用该特性.overflowText;

@width: 100px;@height: 30px;@color: #c7d63e;/* 文字超出隐藏 */.overflowText {    white-space: nowrap;    text-overflow: ellipsis;    overflow: hidden;}#app {    width: @width;    height: @height;    color: @color;    .overflowText();}

转换的 CSS 代码：

带参混合

混合定义使用时还可以像JavaScript函数一样，携带参数。调用方式：.类名(参数1, 参数2...);

.funA(@w, @h, @color) {    width: @w;    height: @h;    color: @color;}.p1 {    .funA(10px, 20px, #f00);}.p2 {    .funA(30px, 200px, #ff0);}

转换后 CSS：

.p1 {  width: 10px;  height: 20px;  color: #f00;}.p2 {  width: 30px;  height: 200px;  color: #ff0;}

这种方式适用于大部分样式相同，但拥有些许差异的元素

带有默认值的带参混合

既让上面提到了带参混合，那么如果不传参时，能否设定一个默认值呢？ 答案当然是可以的

对之前 css 代码稍作修改：

.funA(@w, @h, @color: #0f0) {    width: @w;    height: @h;    color: @color;}.p1 {    .funA(10px, 20px);}

一般来说，默认参数最好放在最后，并且默认参数后的参数也必须使用默认参数。

命名混合

JavaScript调用函数传参时要按照顺便进行传参，但是在less带参混入中可以指定名称

比如：

.funA(@w, @h, @color: #0f0) {    width: @w;    height: @h;    color: @color;}.p1 {    .funA(@h:20px, @w: 100px);}

这样转换出来的 css， p1 元素宽依旧是 100px，高是 20px

嵌套（Nesting）🐘

CSS样式是为了修饰HTML骨架，让页面变得充满血肉。

但是HTML中元素其实是层级嵌套的，所以最好在编写 css 也能够与html层级相匹配嵌套编写。而less中使用嵌套（nesting）代替层叠或与层叠结合使用的能力。

这一特性其实非常好用，在我眼里甚至比之前的变量更优。当然因为经常使用，所以也常常被忽略。

html

<div class="main">        <div class="left">            <div class="leftTop"></div>        </div>        <div class="right">            <div class="rightTop"></div>        </div>    </div>

less

.main {    .left{        .leftTop {            width: 10px;        }    }    .right {        .rightTop {            width: 10px;        }    }}

注释 🐼

编写代码后，维护的好手段就是写注释

在 less 当中，使用//编写的注释不会被生成到转换的 CSS 当中，只有/**/编写的注释才会在 CSS 当中出现