【Less】一文帶你了解Less

文章目錄

• 【Less】一文帶你了解Less
• • 一、CSS預處理器
  • • 1.1 CSS編寫的痛點
    • 1.2 認識CSS預處理器
    • 1.3 常見的CSS預處理器
  • 二、Less
  • • 2.1 認識Less
    • 2.2 Less代碼的編譯
    • 2.3 Less文法

一、CSS預處理器

1.1 CSS編寫的痛點

• CSS作為一種樣式語言, 本身用來給HTML元素添加樣式是沒有問題的.
• 但是目前前端項目已經越來越複雜, 不再是簡簡單單的幾行CSS就可以搞定的, 我們需要幾千行甚至上萬行的CSS來完成頁面的美化工作.
• 随着代碼量的增加, 必然會造成很多的編寫不便：
• 比如大量的重複代碼, 雖然可以用類來勉強管理和抽取, 但是使用起來依然不友善；
• 比如無法定義變量（當然目前已經支援）, 如果一個值被修改, 那麼需要修改大量代碼, 可維護性很差; (比如主題顔色)
• 比如沒有專門的作用域和嵌套, 需要定義大量的id/class來保證選擇器的準确性, 避免樣式混淆;  等等一系列的問題；

1.2 認識CSS預處理器

• 社群為了解決CSS面臨的大量問題, 出現了一系列的CSS預處理器(CSS_preprocessor)
• CSS 預處理器是一個能讓你通過預處理器自己獨有的文法來生成CSS的程式;
• 市面上有很多CSS預處理器可供選擇，且絕大多數CSS預處理器會增加一些原生CSS不具備的特性;
• 代碼最終會轉化為CSS來運作, 因為對于浏覽器來說隻識别CSS

CSS預處理器為CSS增加了一些程式設計特性，無需考慮浏覽器的相容問題，可以在CSS中使用變量，簡單的邏輯程式，函數等在程式設計語言中的一些基本的性能，可以讓CSS更加的簡潔，增加适應性以及可複讀性，可維護性等。

1.3 常見的CSS預處理器

• Sass/Scss
• Less
• Stylus

二、Less

2.1 認識Less

• Less （Leaner Style Sheets 的縮寫） 是一門CSS 擴充語言, 并且相容CSS。
  • Less增加了很多相比于CSS更好用的特性;
  • 比如定義變量、混入、嵌套、計算等等；
  • Less最終需要被編譯成CSS運作于浏覽器中（包括部署到伺服器中）；

2.2 Less代碼的編譯

Less代碼如何被編譯成CSS代碼運作呢？

1. 下載下傳Node環境，通過npm包管理下載下傳less工具，使用less工具對代碼進行編譯

   npm install -g less
   > lessc styles.less styles.css
              

2. 通過VSCode插件來編譯成CSS

   

3. 引入CDN的less編譯代碼，對less進行實時的處理

   <link rel="stylesheet/less" href="./Less的基本使用.less">
     <script src="https://cdn.jsdelivr.net/npm/[email protected]" ></script>
              

4. 将less編譯的js代碼下載下傳到本地，執行js代碼對less進行編譯

2.3 Less文法

1. Less相容CSS
   • 是以我們可以在Less檔案中編寫所有的CSS代碼；
   • 隻是将css的擴充名改成了.less結尾而已；
2. 變量
   • 在Less中使用如下的格式來定義變量
   • @變量名: 變量值;

   @maincolor: #1296db;
   .container {
     width: 500px;
     height: 300px;
     background-color: @maincolor;
   }
              

3. 嵌套
   • 在CSS中，當我們需要找到一個内層的元素時，往往需要嵌套很多層的選擇器
   • Less提供了選擇器的嵌套

     @maincolor: #1296db;
     .container {
       width: 500px;
       height: 300px;
       background-color: @maincolor;
     
       .box {
         width: 200px;
         height: 100px;
         background-color: aquamarine;
       }
     }
                

   • &：代表的上一層選擇器的名字
   • **目前選擇器的僞類或者僞元素。**如 :hover :focus :after :before等

     &:hover {
         }
                

4. 運算
   • 在Less中，算術運算符 +、-、 * 、/ 可以對任何數字、顔色或變量進行運算。
   • 算術運算符在加、減或比較之前會進行機關換算，計算的結果以最左側操作數的機關類型為準；
   • 如果機關換算無效或失去意義，則忽略機關；
5. 混入
   • 在原來的CSS編寫過程中，多個選擇器中可能會有大量相同的代碼
   • 我們希望可以将這些代碼進行抽取到一個獨立的地方，任何選擇器都可以進行複用；
   • 在less中提供了混入（Mixins）來幫助我們完成這樣的操作；
   • 混合（Mixin）是一種将一組屬性從一個規則集（或混入）到另一個規則集的方法。
   • 假設我們定義了一個類（class）如下：

     .bordered {
       border: 1px solid black;
     }
                

   • 如果我們希望在其它規則集中使用這些屬性呢？沒問題，我們隻需像下面這樣輸入所需屬性的類（class）名稱即可，如下所示：

     .container {
       width: 500px;
       height: 300px;
       background-color: @maincolor;
     
       .bordered();
     }
                

6. extend繼承
   • 和mixins作用類似，用于複用代碼；
   • 和mixins相比，繼承代碼最終會轉化成并集選擇器
7. 作用域
   • 在查找一個變量時，首先在本地查找變量和混合（mixins）；
   • 如果找不到，則從“父”級作用域繼承；
8. 導入
   • 導入的方式和CSS的用法是一緻的；
   • 導入一個 .less 檔案，此檔案中的所有變量就可以全部使用了；
   • 如果導入的檔案是 .less 擴充名，則可以将擴充名省略掉；