LESS

代碼組織

代碼按一下順序組織：

1.@import

2.變量聲明

3.樣式聲明

@import "mixins/size.less";

@default-text-color: #333;

.page {
  width: 960px;
  margin: 0 auto;
}

@import 語句

@import 語句引用的文需要寫在一對引號內，.less 后綴不得省略。引號使用 ' 和 " 均可，但在同一項目內需統(tǒng)一。

/* Not recommended */@import "mixins/size";
@import 'mixins/grid.less';/* Recommended */@import "mixins/size.less";
@import "mixins/grid.less";

混入（Mixin）

1.在定義 mixin 時，如果 mixin 名稱不是一個需要使用的 className，必須加上括號，否則即使不被調用也會輸出到 CSS 中。

2.如果混入的是本身不輸出內容的 mixin，需要在 mixin 后添加括號（即使不傳參數(shù)），以區(qū)分這是否是一個 className。

/* Not recommended */.big-text {
  font-size: 2em;
}

h3 {
  .big-text;
  .clearfix;
}/* Recommended */.big-text() {
  font-size: 2em;
}

h3 {
  .big-text(); /* 1 */
  .clearfix(); /* 2 */}

避免嵌套層級過多

• 將嵌套深度限制在2級。對于超過3級的嵌套，給予重新評估。這可以避免出現(xiàn)過于詳實的CSS選擇器。

• 避免大量的嵌套規(guī)則。當可讀性受到影響時，將之打斷。推薦避免出現(xiàn)多于20行的嵌套規(guī)則出現(xiàn)。
  

字符串插值

變量可以用類似ruby和php的方式嵌入到字符串中，像@{name}這樣的結構: @base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png");