Less 規範

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 中。的是本身不輸出內容的mixin，需要在mixin 後面加上括號（即使不傳參數），以區分這是否是一個className。

##將巢狀深度限制在2級。大量的嵌套規則。

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

@base-url: "http://assets.fnord.com";

 

background-image: url("@{base-url}/images/bg.png");