前端頁面開發less規範寫法

代碼組織

代碼按一下順序組織：

1. @import
2. 變數聲明
3. 樣式聲明

1 @import "mixins/size.less";
2 @default-text-color: #333;
3 .page {
4 width: 960px;
5 margin: 0 auto;
6 }

@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。

 1 /* Not recommended */
 2 .big-text {
 3 font-size: 2em;
 4 }
 5 h3 {
 6 .big-text;
 7 .clearfix;
 8 }
 9 /* Recommended */
10 .big-text() {
11 font-size: 2em;
12 }
13 h3 {
14 .big-text(); /* 1 */
15 .clearfix(); /* 2 */
16 }

避免嵌套層級過多

• 將嵌套深度限制在2級。對於超過3級的嵌套，給予重新評估。這可以避免出現過於詳實的CSS選擇器。
• 避免大量的嵌套規則。當可讀性受到影響時，將之打斷。推薦避免出現多於20行的嵌套規則出現。

字元串插值

變數可以用類似ruby和php的方式嵌入到字元串中，像@{name}這樣的結構: 

1 @base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png");