less的介紹和使用學習筆記

less的簡介

css相容性不好的地方( 部分瀏覽器無法使用 )

html .box

less語法

變數：

/*less的使用*/
@a:200px;
@b:#bfa;
@c:box1;
.box
/*如果作為類名，或者一部分值使用時必須以 @ 的大括號形式使用*/
.@/1.png")}@d
:200px;
@d:300px;
div/*可以在變數宣告前就使用變數*/
@e:100px;
div

父元素（使用&）

.box /* 為box設定乙個hover & 就表示外層的父元素 */&:hover

}

擴充套件 extend ()

/* extend( ) 對當前選擇器擴充套件指定選擇器的樣式( 選擇器分組 )*/
.p1.p2:extend(.p1)
.p3/*使用類選擇器時可以在選擇器後面新增乙個括號，這時我們實際上就是建立了乙個mixins*/
.p4()
.p5

混合函式

.test
(@w,@h,@bg-color
)div

less的補充

width
: 100px + 100px;

less類似於jquery，是乙個庫。是一種動態樣式語言，屬於css預處理語言的一種，它使用類似css的語法，為css賦予了動態語言的特性，如變數繼承運算函式等，更方便css的編寫和維護。1 混合變數例如 border 如果.div也想用這個樣式直接寫複製 div 複製 2 變數沒帶值 bo...

less is more than css 少即是多，比css 什麼是less？nodejs庫瀏覽器端使用 koala的基本使用less的注釋內容是被編譯的，保留進.css檔案中內容不被編譯，不出現在.css檔案中宣告變數，以開頭，如變數名值 w 500px h 300px box不帶...

less的介紹和使用 學習筆記