less一般在还原UI设计图时常用到，less它是css预处理器， 样式处理中，我常用到的less特性有以下几个

1. 嵌套。

我在还原UI设计图样式时，一般会用基本的嵌套，一般嵌套三级左右， 有时在生成重复类名时会使用

    .button {
        &-ok {
            backgouund-image: url('ok.png');
        }
        &-cancel {
            backgouund-image: url('cancel.png');
        }
        &-custom {
            backgouund-image: url('custom.png');
        }
    }
    // 输出
    .button-ok {
        backgouund-image: url('ok.png');
    }
    .button-cancel {
        backgouund-image: url('cancel.png');
    }
    .button-custom {
        backgouund-image: url('custom.png');
    }

2. 变量。

less 中用 @ 申明变量，我一般在全局样式中使用的多一些, 一些场合中，例如一键换肤、主题切换等使用场景是非常适用的

变量

@width: 20px;

选择器

@my-selector: banner;
.@{my-selector} {
    margin: 0 auto;
}

属性

@property: color;
.widget {
@{property}: #0ee;
}

3. calc() 特例，

calc（）经常在动态计算高度和宽度的时候用

4. 混入。

这个项目中也常用，就是讲一段代码重复利用。例如

.margin {
    color: red;
    margin-top: 20px;
}
.menu {
    text-align: center;
    .margin()
}

如果你想创建一个mixin ，但是你不想那个mixin 出现在你的css 输出中，就可以在mixin 定义之后加上括号

.my-mixin {
    color: red;
}
.my-other-mixin() {
    background: pink
}
.class {
    .my-mixin();
    .my-other-mixin();
}
// 编译后
.my-mixin {
    color: red;
}
.class {
    color: red;
    background: pink;
}

5. 函数。

less中内置了 多种函数，项目中，我主要运用函数进行颜色的转换，例如将颜色的亮度降低25%，颜色的饱和度增加5%等

@base: #f04616;
.class {
color: saturate(@base,5%);
background-color: lighten(@base, 25%);
}

还有一些函数，运算