less學習筆記

使用@來宣告變數

url變數

/* less */
@images: "../img";//需要加引號
body /dog.png");//變數名 必須使用大括號包裹
}/* 生成的 css */
body

變數用於字元拼接使用方法：

@classname: box;
@maincolor: #e92323;
.@

等價於

.box

巢狀使用：

**查詢@media

.container
}@media tv 
}

等同於

@media screen and (max-width: 768px)
}@media tv
}

函式混入: 一堆屬性從乙個規則集到另乙個規則集。

繼承 extend

能夠繼承所匹配的所有樣式，但不會繼承其子元素的內容

.container
}.content
.span

等同於

.container, .content .container .other,

.span

運算

@num: 9;
ul}

等同於

ul

ul li

匯入@improt

less中可以通過@import來匯入外部檔案，@import可以放在**中任意位置，匯入檔案時處理方式取決於檔案的副檔名。

@import "style";      // 匯入 style.less
@import "style.less"; // 匯入style.less
@import "style.php"; // style.php 作為less檔案被匯入
@import "style.css"; // 檔案內容被原樣輸出

乙個**常常是有多個模組組成，如果只使用乙個 .less 檔案，編輯起來非常不便，也不利於分工協作。此時，就可以為每個模組單獨建立 .less 檔案，然後通過 @import指令將它們合併成乙個檔案。

其他

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

相關推薦