Less基本使用

2021-10-12 19:10:24 字數 734 閱讀 6184

因為css是標記語言,無法定義變數、進行計算等,會有很多冗餘**,而less、scss等正是改變了這一缺點。

less是一門css的擴充套件語言,是css的預處理語言,他可以編寫樣式的同時使用變數、進行計算,減少冗餘**,提高開發效率

定義變數基本格式為

@變數名:變數值

使用的時候可以直接當成變數去使用

如:@fontsize:14px; div

使用less做巢狀很簡單,父子關係的元素樣式直接巢狀,偽類、偽元素、並集交集選擇器等使用&拼接

如:

.dv}}

.right

}

less中可以進行運算 直接使用數**算符即可

div
如果進行運算的兩個值只有乙個有單位,則以此為準,如果都有單位,則以前者單位為準

less中使用@import ' '引入別的less檔案 編譯後的css檔案即為兩檔案的結合

如:

common.less:

@bgcolor:pink;

body

index.less:

@import './common.less'

......

index.css:

body:

..........

less的基本使用

3 node編譯 1 變數的定義 變數名 值2 變數的使用 作為屬性值使用 變數名 作為選擇器或者屬性名使用 先從本作用域找,沒有再去上層作用域找,在同一作用域下,變數定義兩次,後面的會覆蓋前面的 1 css注釋,編譯成css後依然存在 2 less注釋,編譯成css後不顯示 1 普通混合 會在cs...

less的使用 基本語法 編譯

注釋 會被刪除 不會被刪除1.變數為屬性值定義變數 變數名 變數值 使用變數 屬性 變數名 變數 main color 333 用法 body2.變數為屬性或者為選擇器定義變數 變數名 變數值 使用變數 屬性值 變數 property color 屬性 用法 body 333 變數 myselect...

less的基本語法以及使用

最近在專案的開發過程中,發現自己的css的 的層級解構不明確,而且很多的地方寫的比較凌亂。在後期新增功能的過程中,往往都是在上面加一段css,有時候比較懶,就會直接綴在css 的最後。這往往導致在後期修改css 的時候,很不容易找到自己的 less的出現很大程度上的幫我們解決了這個問題。less是c...