less簡介

Less （Leaner Style Sheets 的縮寫） 是一門向後相容的 CSS 擴充套件語言。LESS 將 CSS 賦予了動態語言的特性，如 變數， 繼承， 運算， 函式. LESS 既可以在 客戶端 上執行 (支援IE 6+, Webkit, Firefox)，也可以藉助Node.js或者Rhino在服務端執行。

我個人覺得使用less在書寫大量的樣式程式碼時顯得十分重要，它通過變數、繼承、混合、巢狀等語言特性，會極大提高css的書寫效率，而且它的程式碼結構很好地保持了html的文件結構，也更加清晰易讀！

基於node.js的less

通過npm安裝

npm install less -g

命令列用法示例

lessc style.less style.css

變數

less程式碼

@w:100px;
@outw:@w+200px;
@pos:position;
@o:.outBox;
@color:lightgreen;
@prop:color;
@{o} {
  @{pos}:relative;
  width:@outw;
  height:@outw;
  background-color:lightcyan;
  margin:60px auto;
  border:1px solid @color;
  .box1 {
    @{pos}: absolute;
    width:@w;
    height:@w;
    background-@{prop}:lightsalmon;
    left:50%;
    top:10%;
    margin-left:-50px;
  }
  .box2 {
    @{pos}: absolute;
    width:@w;
    height:@w;
    background-@{prop}:rgb(122, 206, 255);
    left:50%;
    bottom:10%;
    margin-left:-50px;
  }
}
 

編譯後

.outBox {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: lightcyan;
  margin: 60px auto;
  border: 1px solid lightgreen;
}
.outBox .box1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: lightsalmon;
  left: 50%;
  top: 10%;
  margin-left: -50px;
}
.outBox .box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #7aceff;
  left: 50%;
  bottom: 10%;
  margin-left: -50px;
}

 

巢狀

less程式碼

.posit {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
}
.outBox {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: lightcyan;
  margin: 60px auto;
  border: 1px solid lightgreen;

  .box1 {
    .posit();
    background-color: lightsalmon;
    top: 10%;
    transition:all 1s;

    &:hover {
      border-radius:50%; 
    }
  } 

  .box2 {
    .posit();
    background-color: #7aceff;
    bottom: 10%;
    transition:all 0.6s;

    &:hover {
      border-top-left-radius:50%;
      border-bottom-right-radius:50%
    }
  }
}

編譯後

.posit {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
}
.outBox {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: lightcyan;
  margin: 60px auto;
  border: 1px solid lightgreen;
}
.outBox .box1 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  background-color: lightsalmon;
  top: 10%;
  transition: all 1s;
}
.outBox .box1:hover {
  border-radius: 50%;
}
.outBox .box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  background-color: #7aceff;
  bottom: 10%;
  transition: all 0.6s;
}
.outBox .box2:hover {
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

混合

混合（Mixin）是一種將一組屬性從一個規則集包含（或混入）到另一個規則集的方法。

less程式碼

.postio {
  position: absolute;
  width:100px;
  height:100px;
  left:50%;
  margin-left:-50px;
}
.outBox {
  position:relative;
  width:300px;
  height:300px;
  background-color:rgb(240, 192, 177);
  margin:60px auto;
  .box1 {
    .postio();
    background-color:rgb(24, 151, 151);
    top:10%;
  }
  .box2 {
    .postio();
    background-color:rgb(17, 113, 168);
    bottom:10%;
  }
}

編譯後

.postio {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
}
.outBox {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #f0c0b1;
  margin: 60px auto;
}
.outBox .box1 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  background-color: #189797;
  top: 10%;
}
.outBox .box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  background-color: #1171a8;
  bottom: 10%;
}

繼承

less程式碼

#main {
  width:100px;
  height:100px;
  &:extend(.lineColor);
}
.lineColor {
  background-color:lightcoral;
}

編譯後

#main {
  width: 100px;
  height: 100px;
}
.lineColor,
#main {
  background-color: lightcoral;
}

運算

less程式碼

.posit {
  position: absolute;
  width: 50+50px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
}

編譯後

.posit {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
}

對映

從 Less 3.5 版本開始，你還可以將混合（mixins）和規則集（rulesets）作為一組值的對映（map）使用。

less程式碼

.setm(){
  prak:rgb(88, 192, 192);
  thal:#f00;
}
.outBox {
  width: 300px;
  height: 300px;
  background-color: .setm[prak];
  margin: 60px auto;
  border:2px solid .setm[thal];
}

編譯後

.outBox {
  width: 300px;
  height: 300px;
  background-color: #58c0c0;
  margin: 60px auto;
  border: 2px solid #f00;
}

作用域

• Less 中的作用域與 CSS 中的作用域非常類似。首先在本地查詢變數和混合（mixins），如果找不到，則從“父”級作用域繼承。
• 與 CSS 自定義屬性一樣，混合（mixin）和變數的定義不必在引用之前事先定義
• 所以對於區域性變數來講，要等到變數載入完畢後做決定

轉義

轉義（Escaping）允許你使用任意字串作為屬性或變數值。任何 ~"anything" 或 ~'anything' 形式的內容都將按原樣輸出

less程式碼

@media (min-width:768px) {
  width:750px;
  height:~"min-height"
}

編譯後

@media (min-width: 768px) {
  width: 750px;
  height: min-height;
}