[TOC] > [官網手冊](http://lesscss.org/) ## 安裝 Node ``` > npm install -g less` > lessc styles.less styles.css ``` browser ``` <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="[//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js](http://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js)" ></script> ``` ## 注釋 在`less`中 `/**/` 注釋可再編譯后保留在 css `//` 編譯后不保留在 css -推薦 ## 導入 ``` @import 'ku' //導入 ku.less 文件 @import (less)'a.css'; //直接把 a.css 合并到 目標文件, 且在合并在導入的位置:如import 寫在60行,則把 css 從60行開始插入 ``` ## 變量 ``` @font-width:22px; p{ font-size: @font-width; } .content{ @font-width:23px; .title{ font-width:@font-width; } } ``` ## 混合 (Mixins) ### 不參數 ``` p{ font-size: @font-with; .red } .red{ color: red; border:solid 1px slateblue; } //outpt css p { font-size: 22px; color: red; border: solid 1px slateblue; } .red { color: red; border: solid 1px slateblue; } ``` ### 傳參 ``` .border_02(@border_width){ border: solid @border_width seagreen; } .test_border{ .border_02(300px); } //output css .test_border { border: solid 300px #2e8b57; } ``` ### 默認參數 ``` .border_02(@border_width:30px){ border: solid @border_width seagreen; } .test_border{ .border_02(); } //output css .test_border { border: solid 30px #2e8b57; } ``` ## 匹配模式 ``` .class_1(left){ border-left:solid 2px red; } .class_1(right){ border-right:solid 2px red; } .clss{ .class_1(right); } ``` ## 運算 ``` @dwidth:200px; .demo{ width: @dwidth+20*2; //240px } ``` ## 嵌套 1. 普通嵌套 ``` .list{ width:60px; height:60px; li{ height:30px; line-height: 30px; span{ font-size:12px; } } a{ float: right; } } ``` 2. & 上層選擇器 ``` a { padding:3px; &:hover{ //上層選擇器 color: red; } } //output css a:hover { color: red; } ``` ## 內置函數 ### Extends 繼承 ``` .base-btn { height: 36px; line-height: 36px; min-width: 100px; border-radius: 4px; } .default-btn { &:extend(.base-btn); color: black; background-color: white; } .primary-btn { &:extend(.base-btn); color: white; background-color: red; } ``` ## @arguments ``` .demo1(@p:1px,@c:red,@l:solid){ //必須要有默認值 border:@arguments; //等價于 @p @c @l } ``` ## 避免編譯 ``` .demo{ width:~'calc(300px-30px)'; //~'xxx' 中的內容原樣輸出 } ``` ### 技巧 1. 生成三角形 ``` .triangle(buttom,@w:5px,@c:#ccc){ border-width:@w; border-color: @c transparent transparent; border-style: solid dashed dashed ; } .triangle(left,@w:5px,@c:#ccc){ border-width:@w; border-color: transparent @c transparent transparent; border-style: dashed solid dashed ; } .triangle(top,@w:5px,@c:#ccc){ border-width:@w; border-color: transparent transparent @c; border-style: dashed dashed solid; } .triangle(right,@w:5px,@c:#ccc){ border-width:@w; border-color: transparent transparent transparent @c; border-style: dashed dashed solid; } .triangle(@_,@w:5px,@c:#ccc){ width:0; height:0; overflow: hidden; } .sanjiao{ .triangle(right,5px,red); } ``` 2. 類名簡寫 ``` <div class="item"> <li class="item_title"></li> </div> .tiem{ &_title{ //就是 item_title } } ```