Less使用筆記

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

npm i less -g

需要注意的是，一定要-g全域性安裝

安裝完了，可以通過命令 lessc -v 來檢視less的版本，並以此驗證自己是否安裝成功

我們這裡以vs code作為**編輯器來說明。less一般不直接交給瀏覽器，因為less的語法瀏覽器不能直接識別。所以，我們使用less的語法來開發**，但是這些less**還要轉成css**才能交給瀏覽器來識別。

安裝完此外掛程式後，它就會自動的幫我們把.less檔案編譯成.css檔案。比如，你建立乙個index.less檔案，只要在你ctrl + s 儲存該檔案的時候，該外掛程式就會幫我們生成乙個同名的css檔案index.css。之後任何一次編輯儲存該less檔案，都會自動更新index.css檔案。非常方便。

1、變數　　

@width: 10px;
@height: @width + 10px;
#header

2、巢狀　　

先來看最簡單的巢狀，由於**非常簡單，就不再解釋了

.head_box}

如果是需要用到偽元素或者偽類了，需要這麼做。假如我們有乙個div，class=「grid」，我們需要設定grid的樣式和它的偽元素，那麼**如下：　　

.grid}

這裡需要注意的是，給.grid元素的偽元素設定樣式，在less語法中，before也好，after也罷，都要當做子元素巢狀到.grid內部的（當然，你也可以遵循普通css語法寫外邊）。

此時就需要使用『&』符號，來代表「當前元素」，本例中，當前元素毫無疑問就是.grid元素

3、運算

算術運算子+、-、*、/可以對任何數字、顏色或變數進行運算。如果可能的話，算術運算子在加、減或比較之前會進行單位換算。計算的結果以最左側運算元的單位型別為準。如果單位換算無效或失去意義，則忽略單位。無效的單位換算例如：px 到 cm 或 rad 到 % 的轉換。　　

// 所有運算元被轉換成相同的單位

@conversion-1: 5cm + 10mm; // 結果是 6cm

@conversion-2: 2 - 3cm - 5mm; // 結果是 -1.5cm

// conversion is impossible

@incompatible-units: 2 + 5px - 3cm; // 結果是 4px

// example with variables

@base: 5%;

@filler: @base * 2; // 結果是 10%

@other: @base + @filler; // 結果是 15%

4、匯入

匯入的意思就是，你可以在乙個less檔案中，引入另外乙個less檔案，這樣就可以在這個less檔案中使用另外乙個less檔案定義的元素了，比如變數。　　

@import "library"; // library.less
@import "typo.css";

如果引入的是less檔案，則可以不寫.less字尾。

1.開啟vs code的「設定」視窗，操作如下：

2.在設定視窗中點選右上角的「開啟設定」按鈕，如下圖：

3.在settings.json檔案中插入下列**：　　

「less.compile」:

效果如圖：

搞定！

Less使用筆記

Vim 使用筆記

xemacs使用筆記

TreeView使用筆記

Less使用筆記

Vim 使用筆記

xemacs使用筆記

TreeView使用筆記

相關推薦