css 預處理語言 Less篇

2021-10-19 18:28:00 字數 1405 閱讀 2946

了解less

它是一門css預處理，擴充了css，增加了諸如變數、混合（mixin）、函式等功能，讓 css 更易維護、方便製作主題、擴充，less也可以執行在 node 或瀏覽器端。

總結：讓css更具維護性、主題性、擴充套件性！

一、變數

/* 語法：@變數名：值 */


@color


: #00c;


/* 藍色 */


#header
生成css**：

#header
二、變數用作屬性名

/* 語法：@變數名： 屬性名 */


@color


:color;


div: #0000cc;


}
生成css**：

div
三、變數用作類名

/* 語法：@變數名：類名 */


@demo


: item;


.@--active


/* div使用此類名 */


"item--active">demo
生成的css**：

.item--active
四、混合

/* 語法：.規則集名稱 */


/* 定義規則集 */


.public


div
生成的css**：

.public


div
五、混合帶選擇器

/* 語法：.規則集名稱 */


/* 定義規則集,包含:hover偽類選擇器 */


.public()


}header


div
生成的css**：

header:hover


div:hover
六、混合帶引數

/* 語法：.規則集名稱(形參1,形參2,…) */


.public


(@color


; @height


)header
生成的css**：

header

css預處理器 less

less是一種動態樣式語言，屬於css預處理語言的一種，它使用類似css的語法，為css的賦予了動態語言的特性，如變數 繼承 運算 函式等，更方便css的編寫和維護。我們編寫的less檔案最終會編譯成css檔案 我們編寫的less檔案最終會被編譯成css檔案去執行，那麼在less中注釋分兩種，一種是...

css預處理器 less

官網 中文網 定義變數以 開頭 width 10px height width 10px 定義的變數 height 為20px top 就像定義了乙個方法，然後可以在多個地方呼叫一樣。bordered top header logo 加減乘除 單位一最左側運算元的單位為準。如果單位換算無效或失去意義...

CSS預處理技術總結（一）Less

css預處理技術已經發展的比較成熟了，通過css預處理技術可以很好的提公升css的程式設計性，提高css 的開發效率和可維護性，目前比較熱門的相關技術有sass less css stylus compass等，最近也陸續在專案中用到了這些技術，所以就來個總結吧，本文為系列文章第二篇，主要討論les...