Less

三种预处理器的区别

Less

Less （Leaner Style Sheets）是一门 CSS 预处理语言。Less为 CSS 加入程序式语言的特性。比如，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本。

创建less文件

新建一个后缀名为.less的文件

Less编译

本质上，Less 包含一套自定义的语法及一个解析器，用户通过less语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。

使用Easy LESS插件，可自动将.less文件编译为.css文件。

less变量

普通的变量

1. 变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。其语法为：

@变量名: 值;

1. 变量名的命名规范：

   • 必须以@开头
   • 不能包含特殊字符
   • 不能以数字开头
   • 变量名对大小写敏感
2. 比如，使用less变量定义颜色：

@color: #4D926F;
body {
    background-color: @color;
}
h1 {
  color: @color;
}

作为选择器和属性名

@div: div;// 选择器名
@width: width; // 属性名
//使用的时候要加上花括号{}
.@{div}{
  @{width}: 200rem;
  height: 200rem;
  background: #ffffff;
}

作为URL

@images: "../img";//需要加引号
body {
    background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}

延迟加载

变量不一定要先声明后使用，可以先使用再声明，这样也是不会报错的，不过没有特殊情况，不建议这样写，影响可读性。

变量的作用域

花括号{}包含了一个变量的作用域，存在多个相同变量时，会使用最后定义的变量，less会在当前作用域向上搜索。

@color: #fff;
div{
  color: @color; // #888;
  @color: #777;
  border-color: @color; // #888;
  p{
    @color: #000;  // 如果这里没有定义，就会去外部的作用域寻找该变量
    color: @color; // #000;
  }
  background: @color; // #888;  
  @color: #888;  // 最后定义的，所以会使用这个变量
}

less混合

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

普通混合

假设已经定义了一个类（class）如下：

.bordered {
  border-top: 1px dotted black;
  border-bottom: 2px solid black;
}

可以在另外一个类中，调用上述的类：

.nav a {
  color: red;
  .bordered;
}

不能编译输出的混合

要让编译混合不输出，只要在后面加上括号()就行了

.bordered() {
  border-top: 1px dotted black;
  border-bottom: 2px solid black;
}

带参数的混合

1. 在 LESS 中，还可以像函数一样定义一个带参数的属性集合：

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

在元素中，调用上述的类：

.button {
  .border-radius(6px);  
}

1. 给参数设置默认值：

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

1. 带多个参数的混合

.mixins(@w, @h, @bgColor:#000){
  width: @w;
  height: @h;
  background: @bgColor;
}
.div1{
  .mixins(200px, 200px, pink); //参数要一一对应
}
.div2{
  .mixins(200px, 200px); // 最后一个参数因为有默认值，所以可以省略
}

1. 给一个参数传递多个值：

.mixins(@margin, @bgColor ){
  width: 200px;
  height: 200px;
  margin: @margin;
  background: @bgColor;
}
.div{
  .mixins(2px,3px,4px,5px;pink);
}
//这里被分号分割了，这时可以看成两个参数，而2px,3px,4px,5px这一串将会被作为第一个参数

如果传参时的括号里面只有逗号，那么会一次传给各个参数；如果传参时既有逗号和分号，那会把分号之前的看成一个整体。

1. @arguments变量，@arguments可以代表全部参数：

.b(@a, @b, @c) {
  border: @arguments
}
.c {
  .b(1px, solid, black)
}

命名空间

Less 命名空间和访问器用于将mixins分组在通用名称下。使用命名空间可以避免名称冲突，并从外部封装mixin组。

.class1 {
  .class2 {
    .val(@param) {
      font-size: @param;
      color:green;
    }
  }
}

.myclass {
  .class1 > .class2 > .val(20px);
}

编译后：

.myclass {
  font-size: 20px;
  color: green;
}

less嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

1. 子元素样式直接嵌套在父元素内部（编译后生成后代选择器）：

.nav {
    a {
        color: blue;
    }
}

1. 添加&符号，元素就被解析为父元素自身或父元素的伪类（适用于交集、伪类、伪元素选择器）。

a {
    &:hover {
        color: red;
    }
}

less运算

1. Less运算提供了加，减，乘，除操作；任何数字、颜色或者变量都可以参与运算。

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

注意：运算符两边要用空格隔开。

1. 两个数参与运算，如果只有一个数有单位，则运算结果取这个数的单位：

@border: 5px + 5;

1. 两个数参与运算，如果两个数都有单位，则以第一个数的单位为准：

width: 80rem / 50px;

@import

新建两个less文件，一个main.less，另一个style.less。可以在less文件中，引入另一个less文件，这样就可以使用其文件中的变量以及混合

//main.less
@color: #000;
.add(){
  width: 4rem;
  height: 4rem;
}

//style.less
@import './main.less'; // 引入
.a{
  .add();
  background: @color;

}

!important

在调用混合时使用该关键字，可以让混合中的属性都继承该关键字

.min(){
  width: 2px;
  height: 2px;
}
.a{
  .min();
}
.b{
  .min() !important;
}

编译后：

.a {
  width: 2px;
  height: 2px;
}
.b {
  width: 2px !important;
  height: 2px !important;
}

条件表达式

Less 没有 if else，可是它有 when

//lightness 计算亮度的函数
.mixin(@a) when(lightness(@a) >= 50%){
  background: black;
}
.mixin(@a) when(lightness(@a) < 50%){
  background: white;
}
.mixin(@a){
  color: @a;
}

//引用混合
.a{
    .mixin(#ddd); // 亮度大于 50% 所以 是 black
}
.b{
    .mixin(#333); // 亮度小于 50% 所以 是 white
}

编译后：

.a {
  background: black;
  color: #ddd;
}
.b {
  background: white;
  color: #333;
}

循环

Less 并没有提供 for 循环功能，但是在LESS中混合可以调用自身，实现递归：

.loop(@count) when(@count > 0){
  // 当变量作为选择器时，要加上花括号
  h@{count}{
    font-size: 10 * @count;
  }
  .loop(@count - 1); // 调用自身
}
.loop(6);

编译后：

h6 {
  font-size: 60;
}
h5 {
  font-size: 50;
}
h4 {
  font-size: 40;
}
h3 {
  font-size: 30;
}
h2 {
  font-size: 20;
}
h1 {
  font-size: 10;
}

继承

一个类继承另一个类的样式，其实就是将两个类组合在一起，用逗号隔开（并集选择器）。

.center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.div:extend(.center){
  width: 400px;
}
.p:extend(.center){

}

编译后：

.center,
.div,
.p {
  display: flex;
  justify-content: center;
  align-items: center;
}
.div {
  width: 400px;
}

扩展

wiki-less

Less中文网