less學習總結

2021-08-20 21:18:19 字數 526 閱讀 3993

less是一種動態樣式語言,less將css賦予了動態語言的特點,比如:變數、繼承、運算、函式。less既可以在客戶端執行,也可以借助node.js或者rhino在服務端執行。

less的優點:

1.結構清晰,便於擴充套件。在less中的巢狀規則下,我們可以在乙個選擇器中巢狀另乙個選擇器來實現繼承,這樣很大程度減少了**量,並且使結構更加清晰。

2.在大規模的**下,當我們需要抽取公共部分的**時,可以用less來寫基礎元件的**,而css是寫具體的頁面**。如果是做框架還是有必要用的

3.可以輕鬆實現多繼承。

例如:.box

//呼叫

.classb

}#footer

6.匹配模式

傳哪乙個就用哪乙個的樣式

例如:寫各個方向的小三角

border-color:下  左   上  右

.********(top,@w:5px;@c:green) }}.

div2}

less中文**

學習總結 LESS的使用

1 編譯工具 koala 2 語法 1 2種注釋方式 注釋內容 注釋內容 這種方法不會編譯到css檔案中 2 變數寫法 變數名 值 例如 parameter 10px 3 樣式巢狀樣式 例如 style1 style2巢狀進.style1裡面,被.style1使用 style2 ul li巢狀在ul...

less使用總結

15年自學了 less 可是一直沒用,就忘記了。後來抱著提高 css 開發速度的目的,又去學習了 less 學完馬上用,效果立竿見影,記得也牢了。剛開始學習前,我們總會問自己乙個問題,學習它有什麼用。就拿這個 less 來說,學習它有什麼用,分明就有了 css 用來編寫樣式,我還要花時間來研究 le...

less學習 less的混合(mixin)

上篇 less的巢狀規則 本篇我們來講述一下什麼是混合 mixin 混合簡單的理解就是把乙個css規則嵌入到另乙個css規則中,那麼這該怎麼理解學習呢?我們先來看一下乙個簡單的混合 a,b mixin class mixin id 編譯後 a,b mixin class mixin id 從上面的例...