3.4. Less 規(guī)范

2018-02-24 15:44 更新

LESS

代碼組織

代碼按一下順序組織:

  1. @import
  2. 變量聲明
  3. 樣式聲明
@import "mixins/size.less";

@default-text-color: #333;

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

@import 語句

@import 語句引用的文需要寫在一對(duì)引號(hào)內(nèi),.less 后綴不得省略。引號(hào)使用?'?和?"?均可,但在同一項(xiàng)目?jī)?nèi)需統(tǒng)一。

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

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

混入(Mixin)

  1. 在定義?mixin?時(shí),如果?mixin?名稱不是一個(gè)需要使用的 className,必須加上括號(hào),否則即使不被調(diào)用也會(huì)輸出到 CSS 中。

  2. 如果混入的是本身不輸出內(nèi)容的 mixin,需要在 mixin 后添加括號(hào)(即使不傳參數(shù)),以區(qū)分這是否是一個(gè) className。
/* Not recommended */
.big-text {
  font-size: 2em;
}

h3 {
  .big-text;
  .clearfix;
}

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

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

避免嵌套層級(jí)過多

  • 將嵌套深度限制在2級(jí)。對(duì)于超過3級(jí)的嵌套,給予重新評(píng)估。這可以避免出現(xiàn)過于詳實(shí)的CSS選擇器。
  • 避免大量的嵌套規(guī)則。當(dāng)可讀性受到影響時(shí),將之打斷。推薦避免出現(xiàn)多于20行的嵌套規(guī)則出現(xiàn)。

字符串插值

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

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)