# LESS
## 代碼組織
代碼按一下順序組織：
1. @import
2. 變量聲明
3. 樣式聲明
~~~
@import "mixins/size.less";
@default-text-color: #333;
.page {
width: 960px;
margin: 0 auto;
}
~~~
## @import 語句
@import 語句引用的文需要寫在一對引號內，.less 后綴不得省略。引號使用?`'`?和?`"`?均可，但在同一項目內需統一。
~~~
/* 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 后添加括號（即使不傳參數），以區分這是否是一個 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級的嵌套，給予重新評估。這可以避免出現過于詳實的CSS選擇器。
* 避免大量的嵌套規則。當可讀性受到影響時，將之打斷。推薦避免出現多于20行的嵌套規則出現。
## 字符串插值
變量可以用類似ruby和php的方式嵌入到字符串中，像@{name}這樣的結構:?`@base-url: "http://assets.fnord.com";`?`background-image: url("@{base-url}/images/bg.png");`
