less的基本使用

2021-09-25 02:25:19 字數 1483 閱讀 1598

3、node編譯

1、變數的定義

@變數名：值
2、變數的使用

作為屬性值使用：@變數名

作為選擇器或者屬性名使用：@

先從本作用域找，沒有再去上層作用域找，在同一作用域下，變數定義兩次，後面的會覆蓋前面的

1、/* css注釋，編譯成css後依然存在 */

2、// less注釋，編譯成css後不顯示

1、普通混合（會在css樣式中編譯輸出）

.混合名｛


// css樣式


｝.混合名()
2、不會輸出的混合

.混合名()｛


// css樣式


｝.混合名(); //混合沒有引數時，可省略()
3、帶引數的混合

.混合名(@變數名1, @變數名2)｛


// css樣式


｝.混合名(c引數值1, 引數值2);
4、引數有預設值的混合 （有預設值的引數在後面）

.混合名(@變數名1, @變數名2:引數值2)｛


// css樣式


｝.混合名(c引數值1); 


.混合名(c引數值1, 新引數值2);
5、引數有預設值的混合 （有預設值的引數在任意位置）

.混合名(@變數名1:引數值1, @變數名2)｛


// css樣式


｝// 呼叫的時候指定引數名


.混合名(@變數名2:引數值2); 


.混合名(@變數名1:引數值1, @變數名2:引數值2); // 呼叫的時候指定引數名
6、@arguments 獲取所有引數

.混合名(@變數名1, @變數名2, @變數名3, @變數名4)｛


屬性名: @arguments 


｝
特殊情況：呼叫混合的時候，引數之間可用逗號隔開，也可用分號隔開

寫多個混合，配合關鍵字when

.混合名(@變數名1, @變數名2, @變數名3, @變數名4) when (@變數名1 = 值1)｛


// css樣式


｝.混合名(@變數名1, @變數名2, @變數名3, @變數名4) when (@變數名1 = 值2)｛


// css樣式


｝.混合名(@變數名1, @變數名2, @變數名3, @變數名4) when (@變數名1 = 值3)｛


// css樣式


｝
頁面樣式拆分成很多個less

通常會把混合單獨寫成less檔案

把定義變數的部分單獨寫成less檔案

@import '檔案路徑'
匯入less檔案可以省略字尾

Less基本使用

因為css是標記語言，無法定義變數 進行計算等，會有很多冗餘 而less scss等正是改變了這一缺點。less是一門css的擴充套件語言，是css的預處理語言，他可以編寫樣式的同時使用變數 進行計算，減少冗餘 提高開發效率 定義變數基本格式為 變數名 變數值 使用的時候可以直接當成變數去使用 如 ...

less的使用 基本語法 編譯

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

less的基本語法以及使用

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