前端從零單排之LESS（第四期)

LESS 是一門CSS預編譯語言，猶記得當初打算使用CSS預編譯語言的時候，可選的有SASS、LESS、Stylus三門，恰好那個時候在學習bootstrap，bootstrap項目中樣式就是less寫的，今後就結下了於LESS的緣分。LESS使用的快一年的時間了。
下面簡單的列舉一下我最愛的三個LESS的特性：

• 變量
  編譯前:

@color: #ccc;
#header {
  color: @color;
}
h2 {
  color: @color;
}

編譯後

#header {
  color: #ccc;
}
h2 {
  color: #ccc;
}

• 混合(Mixins)
  編譯前

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

編譯後

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

• 嵌套
  編譯前

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    a {
      text-decoration: none;
      &:hover {
        border-width: 1px
      }
    }
  }
}

編譯後

#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;
}

這三個緣由我想足以讓人愛上LESS了。可是這裏須要注意的仍然是有些點：

• 變量命名是好事，尤爲是對顏色、字體、柵格系統有很是大的幫助，可是使用過程仍是須要謹慎，最好是有張網站用色的色表圖片，展列整個網站所用顏色或者是直接作成網頁顯示。這樣方便多人合做。
• 函數更多的用處在於封裝一些須要加前綴的屬性，或是多個參數的屬性，同時命名必定要足夠的語義化。
• 嵌套對程序員更友好， 也更好管理， 可是嵌套過深的話這點就成了災難，會讓人看的整我的都斯巴達掉。 適當嵌套，以保持CSS的優雅。
• 有時要考慮兼容性，須要避免編譯某條屬性，方法即在值的前面加一個~符號,具體以下:

.class {
    filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"
}

• LESS 安裝, 同時推薦less在線編譯 網站，可以實時看到效果。
• LESS 可以作數值運算，提供一些函數， 可是我怎麼都感受那是對設計師友好呢， 是我打開方式錯了麼？

參考文章：
LESS 中文官網
LESS Getting started