更方便的css預處理器 less 詳解

2021-10-06 08:19:18 字數 2023 閱讀 9184

.d1

css變數的預設引數,var(變數, 預設引數)

.d1

.d1

可以類似 js 中的變數拼接

.d1

.d2::after

可以將不同單位的數值進行計算

當然也可以進行變數計算calc( var(--***) + var(--yyy) )

注意:

.box

.box

即css變數的作用域是 看html的,

變數只能作用於自身以及後代元素,兄弟元素,祖先元素都不能享用

class

="d1"

>

我真帥div

>

class

="d2"

>

我真是太帥了div

>

.d1

.d2

將以上變數定義改為

:root

.d1.d2

less 是一門 css 預處理語言,它擴充套件了 css 語言,增加了變數、mixin、函式等特性,使 css 更易維護和擴充套件。

less中文網:[

需要明白的知識點:

注意:步驟:

1、舉例 vscode 編輯器

2、安裝外掛程式easy less

3、在vscode編輯那裡,加入以下**

重新打包位 wxss 或 css 檔案

"less.compile"

:

"less.compile"

:

4、直接使用 less 語法

/* 1 定義less變數 */

@color:yellow;

text

/* 變數定義 */

@bgcolor: aqua;

@border: 1px solid red;

.d1

可以理解為 less中的 方法,函式

/* 1 宣告函式 關鍵字 . */

.setcolor(@c, @fc)

div

可以用於像 html 一樣的巢狀關係

推薦 巢狀級別不要超過 3級

>

>

href="

">

>

p>

div>

div 

}}

&表示當前選擇器的父級

.clearfix 

}

>表示子代選擇器

#ddiv 

}

如果有類似的結構,是十分適合迴圈來寫的

.d1 

.d2

.d3

less的迴圈 是函式中的一種,也是遞迴

// 1. 當 index 的值 大於0 就執行

.loop(@index) when (@index > 0)

}// 3. 呼叫

.loop(3);

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

前天寫了一篇文章,關於如何使用harp來加快人的開發效率,在mac系統和linux系統上測試是沒有問題的,但沒有在windows上測試,使用windows的剛入門的前端工程師,安裝harp失敗後,不知道怎麼解決問題。不管學習什麼,解決問題的能力是最重要的,學會自己動手。css有以下特點 然而css的...