css的less预处理器学习小结

写在前面

由于时间原因，笔者在此仅整理一些最常见的less用法，并未涵盖所有的内容。以后如果在项目的过程中用到了其他的内容，还会再进行补充。 如果以下内容有疏漏错误的地方，还请各位读者指正。

1. 嵌套 nest

在原生的css中，如果我们要对父选择器下的子选择器进行单独的样式书写，必须要在父选择器的样式下，再把所有的类名全部重复一遍。

这样就会导致：代码冗杂，重复度高，可读性不强，层级关系不能很好的体现
所以less为我们提供了嵌套的写法，允许将子选择器的样式写在父选择器的花括号里，有了更强的可读性

下面举个例子：

less写法：

.wrapper {
    background-color: #fff;
    
    .nav {
        font-size: 20px;
    }

    .content {
        font-size: 14px;
        &:hover {
            background-color: red;
        }
    }
}

预编译后的css写法：

.wrapper {
  background-color: #fff;
}
.wrapper .nav {
  font-size: 20px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background-color: red;
}

注意，这里的&意思是紧邻着父选择器，没有空格，因为我们知道，对于伪元素或者hover来说，如果前面加了空格，就会导致不生效。

2. 变量与计算 variable & cal

在项目中如果写过原生的css就知道，有许多的地方可能都会用到相同的样式，例如font-size,color,border…

这样就会导致一个老生常谈的问题：代码太过冗杂，并且很难维护！

如果后期有一个样式需要修改，那么需要找到每一个这个样式所在的地方，然后去修改。这样会导致效率的大大降低！而且如果没有复用（mixin和extend）的存在的话，这种情况会变得更加恐怖。

下面举个例子：

less写法：

// 变量 大大简化代码的书写
@fontSize:20px;
@bgColor:red;

.wrapper {
    background-color: lighten(@bgColor,40%); //less内置的lighten函数

    .nav {
        font-size: @fontSize; // 直接调用变量
    }

    .content {
        font-size: @fontSize - 5px; //直接运算
        &:hover {
            background-color: red;
        }
    }
}

预编译后的css写法：

.wrapper {
  background-color: #ffcccc;
}
.wrapper .nav {
  font-size: 20px;
}
.wrapper .content {
  font-size: 15px;
}
.wrapper .content:hover {
  background-color: red;
}

在less代码中，我们在最开始定义了两个变量，均用@符作为前缀，并且变量命名采用驼峰式，采用键值对的方式进行变量赋值。这里的变量命名要尽量语义化

接下来，在需要用到该变量的地方直接使用 @+变量名 即可。

这样之后在修改内容的时候，可以直接对最开始声明的变量进行修改，不需要一个一个的去找原来的样式了。真的很方便。

注意：less不支持乘法和除法的转换乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

3. 混入 mixin

在vue2中，同样也有混入mixin的概念，本质上就是对各个组件内配置项的可重用的代码进行抽取，存放到mixin.js文件中，然后在组件内用mixins配置项再引入。

less中的mixin也是相同的思想，有以下注意点：

• 选择器后面加上()后，就意味着变成了混入代码块，不会出现编译后的css中。
• ()内可以传入形参，也就是刚才提到的变量
• 一个选择器里面的样式想要被混入，也可以不加()，直接在另外的选择器里面调用即可，例如：.box() {}

下面举个例子：

less代码：

@fontSize:20px;
@bgColor:red;

.box(@fs) {
    width: 100px;
    height: 200px;
    font-size: @fs;
    background-color: @bgColor;
}

.box1 {
    .box(@fontSize + 2px);
    line-height: @fontSize;
}

预编译后的css代码：

.box1 {
  width: 100px;
  height: 200px;
  font-size: 22px;
  background-color: red;
  line-height: 20px;
}

可以看到，less中的.box变成一个类似函数的形式，带有形参@fs，并且这个.box是不会被编译到下面的css文件中，它只会作为混入出现在.box1选择器的样式里。

酱紫复用代码，是不是很爽？

4. 继承 extend

也许有同学问了，既然都有了混入mixin了，已经实现了代码的复用，为什么还要有继承呢？

这是因为，如果混入的代码块体积非常大，并且我们多次使用这个混入，就会导致编译后的css文件中，出现大量的重复代码，这是我们不希望看到的。因此就有了继承的出现。

在继承中，我们只需要一行代码，就可以复用到公共样式，当然这个和混入没什么区别。

但是在编译后，利用继承实现的复用，会在css中以并列选择器的样式出现，这样就大大减少的代码量。

继承的语法： .nav:extend(.block)，冒号后面写上extend，括号内跟上要继承的样式。也可以继承多个

下面举个例子：

less代码：

@fontSize:20px;
@bgColor:red;

.block {
    width: 200px;
    height: 200px;
    color: #333;
}

.wrapper {
    background-color: lighten(@bgColor,40%); //less内置的lighten函数

    .nav:extend(.block) {
        font-size: @fontSize; // 直接调用变量
    }

    .content {
        font-size: @fontSize - 5px; //直接运算
        &:extend(.block);
        &:hover {
            background-color: red;
        }
    }
}

预编译后的css代码：

.block,
.wrapper .nav,
.wrapper .content {
  width: 200px;
  height: 200px;
  color: #333;
}
.wrapper {
  background-color: #ffcccc;
}
.wrapper .nav {
  font-size: 20px;
}
.wrapper .content {
  font-size: 15px;
}
.wrapper .content:hover {
  background-color: red;
}

可以明显的看到，在预编译后的css代码上方，把继承的代码用并列选择器放在了一起，这样就大大减少了代码的数量，这是相比如mixin更有优势的地方。

但是mixin也有extend不可替代的地方：mixin可以传入形参，使用更加灵活

5. 循环 loop

笔者由于目前做的项目和demo较少，还未碰见需要使用循环来生成的css样式。

但比如像网格这样的有规律的且较为复杂的布局，用循环来生成会很方便！

下面直接举例子：

less代码：

.common {
    width: 50px;
    height: 20px;
    background-color: red;
}

.generate(@n) when (@n > 0) {
    .generate(@n - 1);
    .col-@{n} {
        width: 1000px + @n;
        &:extend(.common);
    }
}

.generate(5);

预编译后的css代码：

.common,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5 {
  width: 50px;
  height: 20px;
  background-color: red;
}
.col-1 {
  width: 1001px;
}
.col-2 {
  width: 1002px;
}
.col-3 {
  width: 1003px;
}
.col-4 {
  width: 1004px;
}
.col-5 {
  width: 1005px;
}

可以看到，首先我们在less的顶部定义了一个公共样式common，这是因为如果用到循环，肯定所有的元素的样式都是基本一样的。

接着在下面定义一个函数，传入形参@n，并且给结束条件when(@n > 0)。

函数体内部采用了递归的写法，相当于n--，然后附上每一列的样式col。

注意：在区分不同的col的时候，是把n放在了花括号里面，并不是@n。

结束

以上就是笔者的一些浅薄之见，仅作为学习分享心得供各位读者参考。之后若有更好或者书写不当的地方，会及时改正。