less（leanerstyle sheets 的縮寫）是一門 css擴充套件語言，也成為css預處理器。
安裝easy less外掛程式就能使寫入的.less檔案儲存時自動生成.css檔案
1..less中的語法完全相容css語法。
2.html引入時，需要引入的是css檔案。
3.less自動生成為css檔案後，不能直接修改生成的css檔案，因為less檔案的編譯是時時的，重新整理儲存後，修改的css檔案就不存在了。
1.less的巢狀與html的結構一一對應。
//less
.father
}.borther
}//less自動生成的css
.father .son .sun
.father .borther
//html
父親兒子
孫子兄弟
3.父元素的內層選擇中如果沒有&符號，就是它的後代；有&符號，就是父元素自身。
// less中的巢狀與html結構一致
.father
.sun }}
}// 交集
// &代表的是less中的上一級元素
div
}
//定義變數
@color_f34: #f34;
@color_09f: #09f;
@font20: 20px;
@width: 100px;
.father
}.borther
}
2.呼叫變數實際上就是使用變數中儲存的值。
3.乙個變數裡面只能儲存乙個值。
4.變數名要見名知意，不能包含特殊字元，不能以數字開頭。
//定義變數
@color_f34: #f34;
@color_09f: #09f;
@font20: 20px;
@width: 100px;
.father
}.borther
}
語法：
@import "檔名.less";// 混合變數
// 無預設值
.square(@h; @w; @f)
.color(@bg; @fc)
// 有預設值
.square_2(@h: 200px; @w: 200px; @f: 18px)
.color_2(@bg: #90f; @fc: #fff)
//有預設值2
// 高預設是300，寬預設等於高
.square_3(@h: 300; @w: @h; )
// 呼叫無預設值的混合變數必須要傳入值
.box1
.box2
.box3
.box4
.box4
// 清除浮動
.clearfix()
}// 定位居中
.center()
// flex居中
.center_f()
/*單行溢位*/
.one-txt-cut()
/*多行溢位*/
.txt-cut(@l)
css預處理器 less
less是一種動態樣式語言，屬於css預處理語言的一種，它使用類似css的語法，為css的賦予了動態語言的特性，如變數 繼承 運算 函式等，更方便css的編寫和維護。我們編寫的less檔案最終會編譯成css檔案 我們編寫的less檔案最終會被編譯成css檔案去執行，那麼在less中注釋分兩種，一種是...
css預處理器 less
官網 中文網 定義變數以 開頭 width 10px height width 10px 定義的變數 height 為20px top 就像定義了乙個方法，然後可以在多個地方呼叫一樣。bordered top header logo 加減乘除 單位一最左側運算元的單位為準。如果單位換算無效或失去意義...
使用CSS預處理器Less
前天寫了一篇文章，關於如何使用harp來加快人的開發效率，在mac系統和linux系統上測試是沒有問題的，但沒有在windows上測試，使用windows的剛入門的前端工程師，安裝harp失敗後，不知道怎麼解決問題。不管學習什麼，解決問題的能力是最重要的，學會自己動手。css有以下特點 然而css的...