Less 學習筆記

@變數名: 值;

變數是延遲載入的，可以寫在使用行的後面

@color
: pink;
/* 定義 */
body

特別地，如果自定義名和保留字、關鍵字一樣，呼叫時注意加大括號：

@mydiv
: div;
@

編譯後為：

div

div
}

div /* 偽元素選擇器 */ &::before /* 交集選擇器 */ &.font14 /* 子選擇器 */ &>a

}

mixins 就是將一系列屬性從乙個規則集引入到另乙個規則集的方式

.format
div.div2
}

預編譯後為：

.format divdiv .div1 div .div2

上面的 less 有個問題，.format樣式也被編譯出來了，是多餘的部分，解決方式如下：

.format()

這樣，這部分就不會預編譯出來了

類似函式，可以傳參，less **如下：

.format
(@w, @h, @c
)div
.div2
}

預編譯之後，css 檔案如下：

div div .div1 div .div2

less **如下：

.format(@w
:200px, @h
:200px, @c
:green)
div.div2
}

預編譯的**如下：

div div .div1 div .div2

當你想自定義的樣式在預設值的後面，需要手動指定傳參到哪個引數

.format(@w
:200px, @h
:200px, @c
:green)
div.div2
}

預編譯之後的 css **如下：

div div .div1 div .div2

例如畫三角形，我想隨我設定畫的是哪個方向的，此時，第乙個引數可以設定為識別符號，只要每次傳參會自動選擇對應識別符號的樣式

特別地，為了避免冗餘，要定義乙個同名的樣式，第乙個引數必須是@_，這樣呼叫下面的樣式時，缺省會呼叫該樣式裡的設定

【********.less】

.********
(@_,@w,@c
).********
(t,@w,@c) 
.********
(r,@w,@c) 
.********
(b,@w,@c) 
.********
(l,@w,@c
)

【test.less】

@import
"./********.less"
;#wrap>.sjx

【test.css】

#wrap > .sjx

less **

.border
(@1,@2,@3
)#wrap>.sjx

css **

#wrap > .sjx

@border : 5px + 5;

/* 單位以第乙個運算元為準 */

首先定義乙個基類

.center .center:hover

類名可以是多個類，如.class1.class2

然後在 less 中繼承它

*
@import
"./center.less"
;#wrap
&:nth-child(2)
}}

編譯後的結果為

*
.center,
#wrap .inner
.center:hover,
#wrap .inner:hover
#wrap
#wrap .inner:nth-child(1)
#wrap .inner:nth-child(2)

使用~"cacl(100px + 100)"這種形式強制 less 不編譯， css 仍保留cacl(100px + 100)

less 檔案：

div

css 檔案：

div

Less學習筆記

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

Less學習筆記

學習筆記 Less

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

Less 學習筆記

Less學習筆記

Less學習筆記

學習筆記 Less

相關推薦