## :-: [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; } ```