五分鐘快速瞭解Less

大猿猴發表於2019-01-11

概述

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";
複製程式碼

相關文章