Less 編碼規范

編碼

使用UTF-8編碼。不得（MUST NOT）包含BOM信息。

代碼組織

代碼必須（MUST）按如下形式按順序組織：

@import

變量聲明

樣式聲明

// ? @import "est/all.less"; @default-text-color: #333; .page { width: 960px; margin: 0 auto; }

@import 語句

@import 語句引用的文件必須（MUST）寫在一對引號內，.less 后綴不得（MUST NOT）省略（與引入 CSS 文件時的路徑格式一致）。引號使用 ' 和 " 均可，但在同一項目內必須（MUST）統一。

// ? @import 'est/all'; @import "my/mixins.less"; // ? @import "est/all.less"; @import "my/mixins.less";

空格

屬性、變量

選擇器和 { 之間必須（MUST）保留一個空格。

屬性名后的冒號（:）與屬性值之間必須（MUST）保留一個空格，冒號前不得（MUST NOT）保留空格。

定義變量時冒號（:）與變量值之間必須（MUST）保留一個空格，冒號前不得（MUST NOT）保留空格。

在用逗號（,）分隔的列表（Less 函數參數列表、以 , 分隔的屬性值等）中，逗號后必須（MUST）保留一個空格，逗號前不得（MUST NOT）保留空格。

// ? .box{ @w:50px; @h :30px; width:@w; height :@h; color: rgba(255,255,255,.3); transition: width 1s,height 3s; } // ? .box { @w: 50px; @h: 30px; width: @w; height: @h; transition: width 1s, height 3s; }

運算

+ / - / * / / 四個運算符兩側必須（MUST）保留一個空格。+ / - 兩側的操作數必須（MUST）有相同的單位，如果其中一個是變量，另一個數值必須（MUST）書寫單位。

// ? @a: 200px; @b: (@a+100)*2; // ? @a: 200px; @b: (@a + 100px) * 2;

混入（Mixin）

Mixin 和后面的空格之間不得（MUST NOT）包含空格。在給 mixin 傳遞參數時，在參數分隔符（, / ;）后必須（MUST）保留一個空格：

// ? .box { .size(30px,20px); .clearfix (); } // ? .box { .size(30px, 20px); .clearfix(); }

選擇器

當多個選擇器共享一個聲明塊時，每個選擇器聲明必須（MUST）獨占一行。

// ? h1, h2, h3 { font-weight: 700; } // ? h1, h2, h3 { font-weight: 700; }

Class 命名不得以樣式信息進行描述，如 .float-right、text-red 等。

省略與縮寫

縮寫

多個屬性定義可以使用縮寫時， 盡量（SHOULD）使用縮寫。縮寫更清晰字節數更少。常見縮寫有 margin、border、padding、font、list-style 等。在書寫時必須（MUST）考量縮寫展開后是否有不需要覆蓋的屬性內容被修改，從而帶來副作用。

數值

對于處于 (0, 1) 范圍內的數值，小數點前的 0 可以（MAY）省略，同一項目中必須（MUST）保持一致。

// ? transition-duration: 0.5s, .7s; // ? transition-duration: .5s, .7s;

0 值

當屬性值為 0 時，必須（MUST）省略可省的單位（長度單位如 px、em，不包括時間、角度等如 s、deg）。

// ? margin-top: 0px; // ? margin-top: 0;

顏色

顏色定義必須（MUST）使用 #rrggbb 格式定義，并在可能時盡量（SHOULD）縮寫為 #rgb 形式，且避免直接使用顏色名稱與 rgb() 表達式。

// ? border-color: red; color: rgb(254, 254, 254); // ? border-color: #f00; color: #fefefe;

私有屬性前綴

同一屬性有不同私有前綴的，盡量（SHOULD）按前綴長度降序書寫，標準形式必須（MUST）寫在最后。且這一組屬性以第一條的位置為準，盡量（SHOULD）按冒號的位置對齊。

// ? .box { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }

其他

可以（MAY）在無其他更好解決辦法時使用 CSS hack，并且盡量（SHOULD）使用簡單的屬性名 hack 如 _zoom、*margin。

可以（MAY）但謹慎使用 IE 濾鏡。需要注意的是，IE 濾鏡中圖片的 URL 是以頁面路徑作為相對目錄，而不是 CSS 文件路徑。

嵌套和縮進

必須（MUST）采用 4 個空格為一次縮進， 不得（MUST NOT）采用 TAB 作為縮進。

嵌套的聲明塊前必須（MUST）增加一次縮進，有多個聲明塊共享命名空間時盡量（SHOULD）嵌套書寫，避免選擇器的重復。

但是需注意的是，盡量（SHOULD）僅在必須區分上下文時才引入嵌套關系（在嵌套書寫前先考慮如果不能嵌套，會如何書寫選擇器）。

// ? .main .title { font-weight: 700; } .main .content { line-height: 1.5; } .main { .warning { font-weight: 700; } .comment-form { #comment:invalid { color: red; } } } // ? .main { .title { font-weight: 700; } .content { line-height: 1.5; } .warning { font-weight: 700; } } #comment:invalid { color: red; }

變量

Less 的變量值總是以同一作用域下最后一個同名變量為準，務必注意后面的設定會覆蓋所有之前的設定。

變量命名必須（MUST）采用 @foo-bar 形式，不得（MUST NOT）使用 @fooBar 形式。

// ? @sidebarWidth: 200px; @width:800px; // ? @sidebar-width: 200px; @width: 800px;

繼承

使用繼承時，如果在聲明塊內書寫 :extend 語句，必須（MUST）寫在開頭：

// ? .sub { color: red; &:extend(.mod all); } // ? .sub { &:extend(.mod all); color: red; }

混入（Mixin）

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

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

如果混入的是本身不輸出內容的 mixin，必須（MUST）在 mixin 后添加括號（即使不傳參數），以區分這是否是一個 className（修改以后是否會影響 HTML）。

// ? .box { .clearfix; .size (20px); } // ? .box { .clearfix(); .size(20px); }

Mixin 的參數分隔符使用 , 和 ; 均可，但在同一項目中必須（MUST）保持統一。

命名空間

變量和 mixin 在命名時必須（MUST）遵循如下原則：

一個項目只能引入一個無命名前綴的基礎樣式庫（如 est）

業務代碼和其他被引入的樣式代碼中，變量和 mixin 必須有項目或庫的前綴

字符串

在進行字符串轉義時，使用 ~"" 表達式與 e() 函數均可，但在同一項目中必須（MUST）保持一致。

字符串兩側的引號必須（MUST）使用 "。

JS 表達式

可以（MAY）使用 JS 表達式（~``）生成屬性值或變量，其中包含的字符串兩側的引號盡量（SHOULD）使用單引號（'）。

注釋

單行注釋盡量（SHOULD）使用 // 方式。

// Hide everything * { display: none; }

Less

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。