less的使用

安装

这里是全局安装less，在node环境中运行，

cnpm install -g less

less的特点

less只是预处理器，它并不能直接在浏览器中运行，浏览器只能执行.css文件，也就意味着，项目中我们使用less的时候，是需要使用对应的loader（less-loader）转成css才能够在浏览器中运行的。

下面通过编写less，并在nodejs环境转化成css理解一下less，

变量

• css是一种静态语言，定义和赋值是绑定在一块的。
• 应用场景：我们期望页面中的所有的按钮的背景颜色都一致，如果使用css来解决，那就要一个个去编写，效率低，之后要更改颜色时是一项苦力劳动，维护成本高
• 解决方式： 使用less的变量，就相当于我们把这个背景颜色声明为一个常数变量，使用的时候使用变量名就可以，然后要修改的话，只需要改一处。
• 如下代码：

a.less

@bgBtn:#dddddd; //声明一个背景变量
.btn {
    background: @bgBtn;
}
.tabbtn {
    background: @bgBtn;
}

node环境中执行(将a.less转成css，该css的名称为a.css)

lessc a.less a.css

a.css

.btn {
  background: #dddddd;
}
.tabbtn {
  background: #dddddd;
}

Mixins

• 在css中如果想要复用某一些样式的话，是使用以下格式实现的：

选择器,选择器{}

• 看上面的格式，发现css是并列的关系去实现的，没有体现出包含关系，less的mixins的写法可以更好的体现共有的包含关系。
• 如下代码，假设两个box的border设置为相同
  a.less

.comm-border {
    border: 1px red solid;
  }
.box1 {
    .comm-border();
}
.box2 {
    .comm-border();
}

a.css

.comm-border {
  border: 1px red solid;
}
.box1 {
  border: 1px red solid;
}
.box2 {
  border: 1px red solid;
}

嵌套

• css无法很明确的表现出父子的层级，如果通过标签选择器去修改深层的样式，格式如下：

.box div p {}

如果我们还想修改p元素的某些属性的样式，是不是还需要重写一条？

• less允许我们使用嵌套的方式去写父子元素的，使得编码更灵活、简洁

a.less

.box {
    div {
        p {
            background: blue;
            i {
                font-style: normal;
            }
        }
    }
}

a.css

.box div p {
  background: blue;
}
.box div p i {
  font-style: normal;
}

• 建议不要超过三级的嵌套，避免层级过深，选择器地狱嵌套也挺恐怖的

运算

• 运算实则就是允许 +、-、*、/ 计算
• 加减法会进行单位转换，以最左边的单位为准
• 除法、乘法不进行单位转换，因为css不允许指定区域
• 如下代码：
  a.less

@len: 100px+2;
@len2: 100px /2; 
.box1 {
    width: @len2; //  无效
}
.box2 {
    width: @len*2;
}

a.css

.box1 {
  width: 100px / 2; /** 无效**/
}
.box2 {
  width: 204px;
}

注释

• css只允许块注释
• less允许行和块注释
  a.less

@len: 100px+2;
@len2: 100px /2; 
.box1 {
    width: @len2; //  无效,该注释转成css，会被css自动删除
}
/**box**/
.box2 {
    width: @len*2;
}

a.css

.box1 {
  width: 100px / 2;
}
/**box**/
.box2 {
  width: 204px;
}

Importing导入

• 如果编写好一份公共less文件，期望可以在多个组件导入使用 可以使用 @import
• 扩展名是.less时可以省略
  a.less

@import url('./b.less');
@len: 100px+2;
@len2: 100px /2; 
.box1 {
    width: @len2; //  无效,该注释转成css，会被css自动删除
}
/**box**/
.box2 {
    width: @len*2;
}

b.less

div {
    margin: 10px;
}

ab.css

div {
  margin: 10px;
}
.box1 {
  width: 100px / 2;
}
/**box**/
.box2 {
  width: 204px;
}

作用域（Scope）

• 我们声明变量的时候，变量都有一个作用域，分为全局的和局部的，首先从父级开始找，找不到就去全局中找
  a.less

@len: 100px;
.box1 {
    @len:50px;
    /**使用局部len**/
    width: @len; 
}

a.css

.box1 {
  /**使用局部len**/
  width: 50px;
}

函数

• 声明变量的时候，我们可能会期望，这个变量转成特定的格式，less通过赋予函数某种功能提供给我们进行使用。函数手册
  a.less：遍历对象，给设置不同的背景颜色；

@set: {
    one: blue;
    two: green;
    three: red;
  }
each(@set, {
    .col-@{value} {
      background: @value;
    }
  });

a.css

.col-blue {
  background: blue;
}
.col-green {
  background: green;
}
.col-red {
  background: red;
}

命名空间和访问符

• 我们期望能复用或者分发某一段样式代码时，可以使用命名空间
• 如下代码：我期望能够使用.button定义的样式，而不需要重写

a.less

#bundle() {
    .button {
      display: block;
      border: 1px solid black;
      background-color: grey;
      &:hover {
        background-color: white;
      }
    }
    .des {
        color: #fff
    }
  }
.box {
    .btn {
        #bundle.button();
    }
}

a.css

.box .btn {
  display: block;
  border: 1px solid black;
  background-color: grey;
}
.box .btn:hover {
  background-color: white;
}

映射

• mixins和规则集的组合，命名空间是完整一段的使用，那如果我想使用规则集的某个属性呢，比如定义了多个颜色规则集，只想使用其中的某一个，这时我们可以使用映射.
  a.less

#colors() {
    primary: blue;
    secondary: green;
  }
  
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}

a.css

.button {
  color: blue;
  border: 1px solid green;
}

官方文档链接：less