less學習記錄

2021-09-11 01:22:40 字數 1580 閱讀 8701

less個人理解就是一句話:用類似js的語法去寫css。

less官網:

less中文網 :

less作為css的一種擴充套件,less css不僅向下相容css的語法,而且連新增的特性也是使用css語法。這樣的設定使得學習less非常輕鬆,而且你可以在任何時候回退到css。說白了就是在less裡可以按照以前的方法寫css

不過使用方式分為兩種:

第一種,客戶端直接呼叫:

我們開始隨便寫一點html

11

22

然後進入less修改樣式,如果我們想修改h1為紅色可以像css一樣的方法

也可以

div

}

變數、運算:

// js中定義變數

var name = '張三';

//less中定義變數需要用符號@開頭

@color:green;

@height:200px;

div}

混合:

混合可以將乙個定義好的class a輕鬆的引入到class b中,從而簡單的實現class b 繼承class a的所有屬性。我們還可以帶引數的呼叫,就像使用函式一樣。

例如:

@color:green;

@height:200px;

.border(@width:10px)

div}

說明:

1.混合的使用就和js的自定義函式類似,首先 混合 必須前面是以 . +混合名稱開始。

2.結構:.名稱(變數){}

3.可以有預設值,也可以沒有預設值,沒有的話,在呼叫的時候必須傳參,有預設值的時候就可以不用傳遞引數,當然也可以傳參修改預設值如:

.border(1px)

4.多個引數之間和js一樣,用逗號(,) 隔開

5.如果需要新增偽類需要使用&符號,具體方法如下:

div

}}

函式:

直接查文件:

非常簡單

saturate(@color, 10%); // 飽和度增加 10%

desaturate(@color, 10%); // 飽和度降低 10%

//值得注意的是@color 不能直接填寫red,blue等 需要#333333

補充:

1.在乙個less檔案中匯入另乙個less檔案:,只需要新增@import 「less.less」; // 注意:less副檔名可選

2.// 不會被編譯器編譯的注釋會報錯,/**/ 是可以被編譯器編譯的 注釋

3.~』 』 表示的是禁止被編譯

暫時就了解這麼多。。回頭再查查官網,看看其他人的帖子再嘗試補充吧~

第二種方法 預編譯(提前編譯)感覺太麻煩了不推薦。。。(其實也是懶得寫了。。。)

less學習 less的混合(mixin)

上篇 less的巢狀規則 本篇我們來講述一下什麼是混合 mixin 混合簡單的理解就是把乙個css規則嵌入到另乙個css規則中,那麼這該怎麼理解學習呢?我們先來看一下乙個簡單的混合 a,b mixin class mixin id 編譯後 a,b mixin class mixin id 從上面的例...

less學習彙總

1定義變數 text 300px 這裡定義了乙個text變數 body相當於 body 2混合 比如我在定義乙個兩個div的 div,div1 這兩個div唯一不同就是div1比div 多乙個margin 100px,那麼可以用less這樣寫 class div div class div1 div...

less學習總結

less是一種動態樣式語言,less將css賦予了動態語言的特點,比如 變數 繼承 運算 函式。less既可以在客戶端執行,也可以借助node.js或者rhino在服務端執行。less的優點 1.結構清晰,便於擴充套件。在less中的巢狀規則下,我們可以在乙個選擇器中巢狀另乙個選擇器來實現繼承,這樣...