## :-: [Less 中文网](http://lesscss.cn/functions/#functions-overview) ``` - less (css预编译) $ npm install -g less - less解析 $ lessc demo.less demo.css ``` ``` // 双斜线注释(编译后不会显示) /* * 包裹注释(编译后会显示) */ // 1.变量以及运算 @Color: red; @w: 400px; @h: @w - 100px; // 2.混合(带参数函数) 从一个规则，引入到另一个规则。 调用方式：.border(#000, red); .border(@top-color:red,@left-color:#444) { border-top: 2px solid @top-color; border-left: 6px solid @left-color; } body { // 作用域 @size: 16px; // 定义变量 font-size: @size; .border(#000, red); // 调用 .wrap { border: 1px solid @Color; width: @w; height: @h; font-size: @size; .border; // 默认参数、 .demo { // 作用域 @size: 10px; // 定义变量 font-size: @size; // 实际上 font-size:30px; 因为变量是延迟加载的、 .border(#245, #999); @size: 30px; // 定义变量 } } } // less中模块的引入、 @import "./transparent.less"; .demo { // 匹配 .trangle(T, #236, 30px); } // @arguments .border(@w,@s,@c) { border: @arguments; // 相当于 border: @w @s @c; 外部调用：.border(1px, solid, red); } .box { width: 200px; height: 200px; .border(1px, solid, red); } // transparent.less 文件 @import './transparent.less'; // 外部调用：.trangle(T, #236, 30px); .trangle(T,@color:red,@width:25px) { border-width: @width; border-style: solid; border-color: transparent; border-top-color: @color; } .trangle(R,@color:red,@width:25px) { border-width: @width; border-style: solid; border-color: transparent; border-right-color: @color; } .trangle(B,@color:red,@width:25px) { border-width: @width; border-style: solid; border-color: transparent; border-bottom-color: @color; } .trangle(L,@color:red,@width:25px) { border-width: @width; border-style: solid; border-color: transparent; border-left-color: @color; } ```