Less使用

http://lesscss.cn/(Less 中文網)

下載編譯工具（koala）

安裝

開啟後如圖

初始化設定

點選設定進行語言設定，關閉重啟

點選加號進行程式碼專案匯入，如上圖所示

右擊此專案設定輸出路徑，雙擊此專案進行less設定

Less開始

Less註釋

/*我是可編譯註釋*/

Css中可見

// 我是不編譯的註釋

Css中不可見

1.Less變數

用法：@變數名:值

便於統一管理

關鍵字@

例如@str

賦值

@str：7.5rem

2.混合

簡單混合（如下圖）

混合帶引數（如下圖）

混合帶預設引數（如下圖）

作用

 可以做屬性相容處理

例如：

公共樣式引用

3.匹配模式

寫多個方法，呼叫時提高複用率

呼叫

4.運算

加減乘除和括號

除了寬高還有顏色

5.巢狀

子元素可放在父元素中巢狀

&符號代表繼承上一層選擇器

&第二種用法

標籤名稱：

樣式設定：

[email protected](全參)

作用;可儲存所有變數

7.避免編譯

8.!important（優先）

9.匯入外部less或者css

// 匯入less

@import "lessKu";

// 匯入css檔案（不編譯）

@import "../css/ty.css";

// 匯入css樣式（會編譯）

@import (less) "../css/ty.css";

其他

考拉報錯提示圖

問題：

為什麼在定義沒有帶引數的 混合 也要帶括號？

為什麼在定義沒有帶引數的 混合 也要帶括號？ 例如： .bc(){    margin-left: auto;    margin-right: auto; } 在呼叫的時候也是.bc的格式

寫了括號以後  他就變成了真正的混合（類似於js中的函式）  這樣的話 這個東西就是不被比編譯出來的
也就是說 
.b 的class 引用了  .rel()；  那只有b這個東西 有 relative
如果不加括號   .rel{..}  那這還是一個普通的class  編譯的時候依然保留

清除浮動