css预处理工具less的使用

本文章已经发布很久了，文章的内容可能已经失效或者部分失效，请酌情参考。

css的缺点

CSS 是一门非程序式语言，没有变量(已经有了)、函数、SCOPE（作用域）等概念。

CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
不方便修改维护及扩展，不利于复用。
CSS 没有很好的计算能力
对于非前端工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。

Less 介绍

Less（Leaner Style Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。

做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入一些编程语言的特性。比如它引入了变量，Mixin（混入），运算以及函数等功能，这就大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

当然除了Less，CSS常见的预处理器还有Sass、Stylus等。

变量

变量是指其值可以随意变化的量，也就是说值不固定，在 Less 中一般指提前预设好的值，在需要的地方可以多次调用。

变量声明语法：

// 变量的声明规则
@变量名:值;

变量命名规则：

必须有@为前缀
不能包含特殊字符，不能以数字开头
大小写敏感

// 定义颜色变量
@color1: grey;
@color2: red;
@font14: 14px;
@font20: 20px;

.c1{
    // 使用颜色变量
    color: @color1;
    background: @color2;
    font-size: @font14;
}

.c2{
    color: @color2;
    background: @color1;
    font-size: @font20;
}

Less安装

安装nodejs，网址：http://nodejs.cn/download/
检查是否安装成功，使用 cmd 命令（windows系统是 window+r 打开运行输入 cmd ）或者 power shell，输入 “node –v” 查看版本即可
基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可
检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

嵌套

我们在编写 Less 代码的时候，可以写出含有层级关系的 Less 代码，生成的 css 代码也是自动带有层级关系。比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./test.css">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="content">
            <a href="">中国</a>
            <a href="">河南</a>
            <a href="">郑州</a>
            <a href="" class="address">高新区</a>
        </div>
    </header>
</body>
</html>

// test.less
header{
    height: 50px;
    background: red;
    // 下级可以直接嵌套编写
    .content{
        height: 30px;
        background: green;
        // 下级可以直接嵌套编写
        a{
            color: orange;
            font-size: 14px;
            // 伪类需要在前面加个&符号
            &:hover{
                color: chartreuse;
            }
            // 伪元素也是要在前面加个&符号
            &::after{
                content: '书生';
            }
            // 交集也是要在前面加个&符号
            &.address{
                text-decoration: none;
            }
        }
    }
}

编译生成的 test.css 的内容是这样的：

/* 编译生成的 test.css */
header {
  height: 50px;
  background: red;
}
header .content {
  height: 30px;
  background: green;
}
header .content a {
  color: orange;
  font-size: 14px;
}
header .content a:hover {
  color: chartreuse;
}
header .content a::after {
  content: '书生';
}
header .content a.address {
  text-decoration: none;
}

MiXin (混合/混入)

MiXin (混合/混入) 是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

有输出的混入：

比如我们想要这样的代码：

.xxx {
  font-size: 14px;
  color: red;
}

.yyy {
  font-size: 14px;
  color: red;
  background-color: blueviolet;
  border: 1px solid red;
}

我们发现，这样写代码的时候，发现 .xxx 的内容和 .yyy 的内容有一部分是重复的，为了提高代码的复用度，其实我们可以使用并集选择器处理。不过使用 Less 的话，还有一种方法，比如我们可以在 Less 文件中这样写：

.xxx {
  font-size: 14px;
  color: red;
}

.yyy {
  // 将 .xxx 中的样式混入到 .yyy 中
  .xxx;
  background-color: blueviolet;
  border: 1px solid red;
}

无输出的混入：

前面的混入在使用的时候，十分的方便代码的复用，但是还有些时候，我们希望我们的混入代码并不要在生成的文件中出现，只是想在被混入的地方出现，那么我们只需在编写混入代码的时候，在其选择器后面加上() 即可。比如，我们想得到这样的代码：

.yyy {
  font-size: 14px;
  color: red;
  border: 1px solid red;
}
.zzz {
  font-size: 14px;
  color: red;
  background-color: blueviolet;
}

对于共用部分的代码，我们并不想在一个单独的选择器中出现，那么我们可以在 Less 代码中这样写：

// 声明的时候，选择器的后面加个英文小括号
.xxx() {
  font-size: 14px;
  color: red;
}

.yyy {
  // 使用混入的时候，后面的括号，加不加都可以
  .xxx();
  border: 1px solid red;
}

.zzz {
  .xxx;
  background-color: blueviolet;
}

作用域

首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

混入的作用域查找：

.xxx() {
  font-size: 14px;
}

.yyy {
  .xxx () {
    font-size: 18px;
  }
  // 优先在本地作用域中查找MiXin
  .xxx();
  border: 1px solid blue;
}

生成的 css 代码为：

.yyy {
  font-size: 18px;
  border: 1px solid blue;
}

变量的作用域查找：

@MYCOLOR: red;

.yyy {
  @MYCOLOR: green;
  // 优先在本地作用域中查找变量
  border: 1px solid @MYCOLOR;
}

生成的 css 代码为：

.yyy {
  border: 1px solid green;
}

无需先声明再使用：

混合（mixin）和变量的定义不必在引用之前事先定义。

@MYCOLOR: red;

.yyy {
  // 先使用后声明也是可以的
  border: 1px solid @MYCOLOR;
  @MYCOLOR: green;
}

映射

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

// 自定义的规则集合
.COL() {
  x1: blue;
  x2: green;
}

.button {
  // 使用规则集合
  color: .COL[x1];
  border: 1px solid .COL[x2];
}

上面的使用，就像 JS 定义一个对象和并按照键使用它一样。

运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（ + ）、减（ - ）、乘（ * ）、除（ / ）算术运算。

// test.less
/* 这种注释编译生成的文件中也存在 */
// 这种注释在编译生成的文件中不存在

@border: 10px + 5;
div {
    height: 300px * 1.5;
    width: 300px / 2;
    border: @border solid red;
    // 还能运行较复杂的运算
    border-radius: (@border - 5) * 2;


    // 由于前四位代表的ffff 换算成十进制已经分别到255了，再加就溢出了，
    // 因此即使加20，还是按照255算，因此还是ffff
    // 最后两位的计算方式：
    // 十六进制转成十进制 60 = 6 * 16 + 0 = 96
    // 使用十进制 进行运算 96 + 20 = 116
    // 将运算后的结果转成16进制 116 / 16 结果是7余4，那么运算的结果就是74
    // 所以 #ffff60 + 20 最后的结果应该是： #ffff74
    color: #ffff60 + 20;

    // 40 + 20 = 60 换算成16进制  60/16 等于3余12 所以结果为 3c
    // 50 + 20 = 70 换算成16进制  70/16 等于4余6 所以结果为 46
    // 60 + 20 = 80 换算成16进制  80/16 等于5余0 所以结果为 50
    // 因此结果应该为 #3c4650
    color: rgb(40, 50, 60) + 20;

}

运算符中间左右有个空格隔开，比如：10px + 5
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位

关于颜色的几个常见函数可以参考：https://www.jianshu.com/p/124ef8721fc7

导入外部文件

我们知道，在 css 中，我们是可以导入其它样式的，比如：

/* index.css */

/*
在这里使用@import + 样式路径的形式导入其它样式
注意：
	1. 必须在css文件的最前面使用@import
	2. 结尾一定要有分号
*/
@import "./common.css";
/* 两种写法都正确 */
@import url("./common.css");

div:nth-child(1){
    width: 100px;
    height: 100px;
    background-color: aqua;
}

/* common.css */
div:nth-child(2){
    width: 100px;
    height: 100px;
    background-color: darkmagenta;
}

其实在 Less 中，可以直接按照 css 的写法处理，不过其自带的也有类似的用法，和原来的 css 的略有不同：

// index.less
// 这里不用写后缀名
// 其实就相当于把需要导入的文件内容复制进来
@import "./common";

div:nth-child(1){
    width: 100px;
    height: 100px;
    background-color: aqua;
}

// common.less
div:nth-child(2){
    width: 100px;
    height: 100px;
    background-color: darkmagenta;
}

注意，在部分 Less 编译场景下，如果只改了被引入的 Less 文件，没有在主 Less 文件中重新进行 css 文件的生成，则修改部分可能会不生效。

注释

使用 css 原生注释写法编写的注释，会在生成的 css 文件中出现，而使用 Less 注释方式编写的注释则不会出现在生成的 css 文件中。

/* 这是css原生的注释写法 */
// 这是less的注释写法

css的缺点

Less 介绍

变量

Less安装

嵌套

MiXin (混合/混入)

作用域

映射

运算

导入外部文件

注释

💬 评论 0