Less 日常用法
你需要了解的
less 和 sass 是两种 css 预编译语言，其目的是为了更快、更结构的编写 css 文件，是一种强大的 css 编译语言，能使用 变量、运算符、判断、方法等等。
本文我只写一些自己常用的方法，要看全部的帮助文档，参阅这里：
看个小例子
写一个 .btn 类并支持 :hover :active 样式
CSS
.btn {/* btn 初始样式 */}.btn:hover{/* :hover 样式 */}.btn:active{/* :active 样式 */} Less
.btn{// btn 初始样式 &:hover{ // hover 样式 } &:active{ // active 样式 }} 可以看出 less 的结构要比 css 清晰，并且写的也要更少。
下面的 less 在使用中就会生成上面的 css。而这还只是皮毛，保证你用过 less 之后就不会再用 css 写样式了。变量
less 是支持变量的，因为有了变量，让 less 在改变全局样式的时候更加方便了。
@变量名: 变量值// 如：// Colors@red: #CD594B;@yellow: #F8CE5E;@green: #4B9E65;@yellow: #5A8DEE;// Unites@btn-padding: 4px;@btn-lineheight: 26px;
实际使用中：
less
.btn-success { background-color: @green; line-height: @btn-lineheight; color: #fff;} 生成 css
.btn-success { background-color: #4B9E65; line-height: 26px; color: #fff;} 混合
可以直接在其它类中插入其它类的内容。
less
.bg-yellow { background-color: @yellow;}.btn-warn { line-height: @btn-lineheight; .bg-yellow;} 会生成 css
.bg-yellow { background-color: #F8CE5E;}.btn-warn { line-height: 26px; background-color: #F8CE5E;} 运算符
less 支持 + - * / ( ) 运算，看例子
@width-20: 20px;@count: 3;@per-10: 10%;.card{ width: @width-20 * @count; min-width: @per-10 * 7;}// 注意，运算的时候，要在运算符两边留空格，因为可能会有横线连接的变量，造成混淆。// 单位 less 可以自动识别，不用担心单位。 输出
.card{ width: 60px; min-width: 70%;} less 的内置函数
参阅 ：
完整的函数有：
杂项函数、字符串函数、 列表函数、 数学函数、类型函数、颜色定义函数、颜色通道函数、颜色操作函数、颜色混合函数 这里只说一此关于颜色的常用方法，因为其它的我现在也没怎么用到。
lighten(颜色, 百分比)// 调高颜色的亮度darden(颜色, 百分比)// 调低颜色的亮度saturate(颜色, 百分比)// 调高饱和度desaturate(颜色, 百分比)// 调低饱和度
@green: #4B9E65;.green{ background-color: @green;}.green-lighten{ background-color: lighten(@green,20%);}.green-darken{ background-color: darken(@green,20%);}.green-saturate{ background-color: saturate(@green,20%);}.green-desaturate{ background-color: desaturate(@green,20%);} 输出
.green { background-color: #4B9E65;}.green-lighten { background-color: #88c79c;}.green-darken { background-color: #2a5939;}.green-saturate { background-color: #34b55c;}.green-desaturate { background-color: #62876e;} 函数方法的使用
有时候，比如，你需要写一个按钮类 .btn-success, .btn-danger, .btn-default, .btn-warning，如果单个定义的话，会很麻烦，现在用了方法，就可以直接填参数完成了。
less
@green: #4B9E65;@blue: #5A8DEE;@yellow: #F8CE5E;@red: #CD594B;.btn-template(@bgcolor,@fcolor:white){// 定义了两个参数，第二个参数有默认值// 也就是说这个方法可以值一个或两个参数// 另外 带 () 参数的方法不会把自身渲染到 css 中，只有调用才会渲染 color: @fcolor; border-color: darken(@bgcolor, 3%); background-color: @bgcolor; &:hover { color: @fcolor; background-color: darken(@bgcolor, 5%); } &:active { color: @fcolor; background-color: darken(@bgcolor, 10%); }}.btn-success{ .btn-template(@green)}.btn-primary{ .btn-template(@blue)}.btn-warning{ .btn-template(@yellow)}.btn-danger{ .btn-template(@red)} 上面的 less 输出为下面的内容，有没有很厉害
.btn-success { color: white; border-color: #46945e; background-color: #4B9E65;}.btn-success:hover { color: white; background-color: #438d5a;}.btn-success:active { color: white; background-color: #3b7b4f;}.btn-primary { color: white; border-color: #4c83ed; background-color: #5A8DEE;}.btn-primary:hover { color: white; background-color: #437dec;}.btn-primary:active { color: white; background-color: #2c6de9;}.btn-warning { color: white; border-color: #f7ca4f; background-color: #F8CE5E;}.btn-warning:hover { color: white; background-color: #f7c746;}.btn-warning:active { color: white; background-color: #f6bf2d;}.btn-danger { color: white; border-color: #ca4e3f; background-color: #CD594B;}.btn-danger:hover { color: white; background-color: #c74737;}.btn-danger:active { color: white; background-color: #b34032;} 文件拆分，文件引用
像 js 和其它高级开发语言一样， less 也可以引用外部的 less 文件
引用格式：
@import "variables.less"
这样就把外部的 variables.less 引入到当前文件中了
variables.less
// colors@green: #4B9E65;@blue: #5A8DEE;@yellow: #F8CE5E;@red: #CD594B;// units@common-height: 30px;@input-height: 26px;@input-padding: 4px;
主体less文件
@import "variables.less"// 主文件里面就可以引用 variables.less 中的变量了。
学习 Less 最好的例子
就是去看 的样式源码，bootstrap 3.4 就是用 less 写的，这也是我后来用 less 没用 sass 的主要原因。
下载 的 less 源码，看里面怎么写的，进步很快的。
是我孤陋寡闻了，原来 已经换作 SCSS 了，我也要转向 SCSS 了，学习完了再来分享给大家。
点这里去 github 查看 ，目前好像已经开始 v5.0 的开发了。