學習總結 LESS的使用

2021-08-20 19:41:12 字數 442 閱讀 7001

1、編譯工具:koala

2、語法:

(1)2種注釋方式:/*注釋內容*/、//注釋內容(這種方法不會編譯到css檔案中)

(2)變數寫法:@變數名:值;例如:@parameter:10px;

(3)樣式巢狀樣式:

例如:.style1 //.style2巢狀進.style1裡面,被.style1使用

.style2

ul } //li巢狀在ul裡,編譯成ul     ul li

a  } //滑鼠經過時為紅色,「&」表示上一層選擇器

(4)可傳引數(多個用「,」隔開)

.test1

.test2(@parameter:20px)

(5)匹配模式:  「@_」 匹配所有

(6)運算:    變數可加減乘除

(7)@arguments: 代表那個樣式函式所有的引數變數

less使用總結

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

less學習總結

less是一種動態樣式語言,less將css賦予了動態語言的特點,比如 變數 繼承 運算 函式。less既可以在客戶端執行,也可以借助node.js或者rhino在服務端執行。less的優點 1.結構清晰,便於擴充套件。在less中的巢狀規則下,我們可以在乙個選擇器中巢狀另乙個選擇器來實現繼承,這樣...

less使用小總結

less檔案 這句注釋會被編譯進css 這句注釋不會編譯進css 引入其它的less檔案 import v.less 變數 bgc yellow div1 常用的數值計算函式 num1 100 num2 20.3px num3 32.2px num4 44.4px num5 0.5 num6 55 ...