五分鐘快速瞭解Less

概述

Less全稱為Leaner Style Sheets，更為簡潔的樣式表

快速安裝

npm install -g less
lessc styles.less styles.css 或 lessc -h
複製程式碼

變數

• 用法：用"@"宣告變數，用":"賦值變數

  eg:

  // LESS
  @color: #4D926F;
  #header { 
    color: @color;
  }
  h2 { 
    color: @color;
  }
  /* 轉換為CSS */
  #header { 
    color: #4D926F;
  }
  h2 { 
    color: #4D926F;
  }
  複製程式碼

混合

• 概念：A樣式引用了B樣式，A樣式將繼承B樣式的所有屬性，分無參混合和有參混合

  eg:

  // LESS
  .rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
  }
  #header { 
    .rounded-corners;
  }
  #footer { 
    .rounded-corners(10px);
  }
  /* 轉換為CSS */
  #header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
  }
  #footer {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
  }
  複製程式碼

巢狀

• 概念：在一個選擇器中巢狀另一個選擇器，用來實現樣式繼承，從而減少程式碼量，並且增加程式碼的可讀性。解決後代選擇器相關的樣式可能散佈在CSS檔案的任何地方問題

  eg:

    // LESS
    #header {
      h1 {
        font-size: 26px;
        font-weight: bold;
      }
      p { 
        font-size: 12px;
        a { 
          text-decoration: none;
          &:hover { 
            border-width: 1px 
          }
        }
      }
    }
  /* 轉換為CSS */
  #header h1 {
    font-size: 26px;
    font-weight: bold;
  }
  #header p { 
    font-size: 12px;
  }
  #header p a { 
    text-decoration: none;
  }
  #header p a:hover {
    border-width: 1px;
  }
  複製程式碼

運算

• 概念：提供四則運算子

  eg:

  // LESS
  @the-border: 1px;
  @base-color: #111;
  @red: #842210;
  #header {
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
  }
  #footer {
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
  }
  /* 轉換為CSS */
  #header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
  }
  #footer {
    color: #114411;
    border-color: #7d2717;
  }
  複製程式碼

轉義

v3.5之後支援

eg:

  @min768: (min-width: 768px);
  .element {
    @media @min768 {
    font-size: 1.2rem;
    }
  }
  編譯為
  @media (min-width: 768px) {
    .element {
      font-size: 1.2rem;
    }
  }
複製程式碼

名稱空間與訪問器

• 概念：將一些變數或者混合模組打包封裝，進行分組，更好地組織CSS和屬性集的重複使用 eg:

    #bundle() {
     .button {
       display: block;
       border: 1px solid black;
       background-color: grey;
       &:hover {
         background-color: white;
       }
     }
     .tab { ... }
     .citation { ... }
    }
    //應用混合.button()到#header a
    #header a {
     color: orange;
     #bundle.button();//#bundle > .button()、#bundle .inner()是等價的 
    }
  複製程式碼

作用域

• 概念：區域性修改樣式。先從本地查詢變數或者混合模組，如果沒有找到的話就會去父級作用域中查詢，直至找到為止

  eg:

    @var: red;
    #page{
      #header{
        color: @var; // white
      }
      @var: white;
    }
  複製程式碼

匯入

eg:

  @import "library"; // library.less
  @import "typo.css";
複製程式碼