less 的使用

安装

$ npm install less -g

##变量
使用 @ 符号定义变量

变量

使用 @ 符号定义变量

@classname: main;
@color: red;
.@classname{
    background-color: @color;
}

混合

先看一个 example.css 文件：

#menu a {
    color: #111;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu span {
    height: 16px;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu p {
    color: red;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

可以看到上面三个样式中都有 border-top 和 border-bottom 两个属性，并且内容完全相同；在传统 CSS 写法中只能这样一遍有一遍的去书写重复的内容，在 Less 中通过将公共属性抽取出来作为一个公共类的方式规避这一点。
// example2.less

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

#menu a {
    color: #111;
    .bordered;
}

#menu span {
    height: 16px;
    .bordered;
}

#menu p {
    color: red;
    .bordered();
}

混合方式的总结：

• 混合也是减少代码书写量的一个方法；
• 混合的类名在定义的时候加上小括弧 ()，那么在转译成 css 文件时就不会出现；
• 混合的类名在被调用的时候加上小括弧 ()和不加上小括弧 ()是一样的效果，看个人习惯，如：第三行和第八行转译成 css 是一样的。

函数

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

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

父子元素的写法

.container {
    padding: 0;
    .article {
        background-color: red;
    }
}

引入其他样式文件 @import

@import "../../common/style/components.css";

其实less的写法和sass的写法非常相似，不同的地方就是函数的写法和变量的定义方式不一样，在适配移动端的时候我们可以用less自适应的方式来配置，而sass可以通过多媒体查询的方式进行适配。

不喜勿喷哈，希望大家多多指点！！