關於Less的學習筆記

less簡介部分記錄：

1、 less是一門css預處理語言，它擴充了css語言，增加了諸如變數、混合（mixin）、函式等功能，讓css更易維護、方便製作主題、擴充，是一種動態樣式語言。

2、編譯工具：koala。

3、注釋（兩種方式）：

/* 此種注釋會被編譯，即此句注釋會出現在編譯好的css檔案中。 */

// 不會被編譯。

4、變數：

宣告變數：@變數名:值;

5、混合使用：可帶引數，也可不帶引數。

好處：css3相容性使用，修改方便。

6、匹配模式：滿足條件後才匹配。

7、運算：可進行加減乘除的運算。

less**學習部分記錄：

1、定義編碼方式：

@charset
"utf-8"
;

2、普通的css**編寫：

body

3、注釋的區別：

/* can see */

// can't see

4、變數的宣告使用：

@test_width
:320px;

.box

5、混合：

（1）不帶引數的混合：

.border

.box

（2）帶引數的混合：

1）沒有預設值，一定要傳參：

.border_02(@border_width)
.test_mix
.box

2）帶預設值：

.border_03(@border_width:20px)
.test_mix_03
.box

6、css3相容性使用舉例：

.border_radius(@radius:8px)
.radius_test

7、匹配模式：

（1）舉例：畫乙個三角形 /*畫乙個三角形的原始方法*/ .******** /*用匹配模式畫三角形*/ .********_test(top,@w:60px,@c:mediumvioletred)//向上的三角形 .********_test(bottom,@w:60px,@c:mediumvioletred)//向下的三角形 .********_test(left,@w:60px,@c:mediumvioletred)//向左的三角形 .********_test(right,@w:60px,@c:mediumvioletred)//向右的三角形 //@_：代表始終帶著這個函式執行 .********_test(@_,@w:60px,@c:mediumvioletred)

.********

（2）舉例：定位的使用
.pos(r)
.pos(ab)
.pos(f)
.test

8、運算（加減乘除）：

@test_01:
300px;
.box_02

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

相關推薦