less 學習筆記

1 什麼是less

less 包含一套自定義的語法及乙個解析器，使用者根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 css

檔案。less 並沒有裁剪 css 原有的特性，更不是用來取代 css 的，而是在現有 css 語法的基礎上，為 css 加入程式式語言的特性,less 編譯工具koala.exe

2 less語法

less中有很多的語法規則，但個人覺得less中比較常用的也是最重要的就下面幾個：

變數、混合規則（mixin）、模式匹配、巢狀，& 指代上一層的選擇器

不常用的：arguments 避免編譯！important

1. 先來看下變數的簡單用法，less中有變數運算，(參與運算任何乙個引數帶有單位即可)

less 重點

//變數

//mixin 混合

//模式匹配

//巢狀規則

@test-width:100px;

@test-size:12px;

.wrap

編譯產出物，就是css啦

.wrap

2.混合規則（mixin）,相當於定義乙個類，在別的類中直接包含進來，看下具體情況吧

@test-width:100px;
@test-size:12px;
.wrap
.default-border

對應的css編譯結果為==>

.default-borde會出現在css中，如果是定義成

.default-border(@varname)這個不會出現在產出物css中，定義的產出物只會出現在mixin中,看下面的**-2

.wrap

.default-border

**2-

1
.border01(@b1)
45 .width-1(@w1:100px;)910
.test

view code

產出物**2-

.test

view code

3.模式匹配

預先定義一系列的類，這些都會有不同的引數，不同的引數其內部的樣式是不同的，mixin的時候根據傳入的引數不同而自動匹配到不同的類

例如：四個不同方向的箭頭

1
//direction bottom: 
2.tg(bottom)7//
direction right: 
8.tg(right)
13//
direction left: 
14.tg(left)
19//
不管匹配到哪乙個，這個一定會匹配到的，@_必須這種寫法，所有的引數必須保持一致
20.tg(@_)
2526
.sj

對應產出物==> 所有.tg不出出現在css中,只有.sj會出現在css中

.sj

3.巢狀規則和 &

1
.list9a
16}17 }

產出物==>

.list

6.list li

10.list a

14.list a:hover

4.其他不重要的

arguments

.t-arguments(@style:solid,@width:1px,@color:#ffddff)
.test-arguments

output==>

.test-arguments

避免編譯

/*koala 會吧210px-20px編譯，這不是我們想要的，calc是css3的屬性，應交給瀏覽器編譯

*/2 .t-comile5/*

避免編譯

*/6 .t-cancel-compile

output==>

/*koala 會吧210px-20px編譯，這不是我們想要的，calc是css3的屬性，應交給瀏覽器編譯

*/2 .t-comile 5/*

避免編譯

*/6 .t-cancel-compile

!important,會把所有的mixin進來的所有的屬性都字尾加上！important

.t-important(@width:200px,@height:200px)
.test-important

output==>

.test-important

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

相關推薦