小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

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，省略配置》。也可以参考官方安装方法：lesscss.cn/#using-less…

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

变量（Variables）🐪

普通属性值定义

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

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;
}

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

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

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

至于属性名等则是看个人了，如果觉得想少写些，可以用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代码：

混入.png

带参混合

混合定义使用时还可以像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当中出现

🎅Less快速学习（上）🎅