.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的...