CSS SASS規(guī)范

語(yǔ)法選用

SASS有兩種語(yǔ)法格式，一種是 SCSS (Sassy CSS)，另一種是縮進(jìn)格式（Indented Syntax），有時(shí)稱之為 Sass。

SCSS

SCSS語(yǔ)法基于 CSS 語(yǔ)法擴(kuò)展，每一個(gè)有效的 CSS 文件都是一個(gè)有效的具有相同含義的 SCSS 文件，換種說(shuō)法就是 SCSS 能識(shí)別大多數(shù)的 CSS hacks 寫(xiě)法和瀏覽器前綴寫(xiě)法以及早期的 IE 濾鏡寫(xiě)法，這種格式以 .scss 作為擴(kuò)展名。

Sass

Sass 使用 “縮進(jìn)” 代替 “花括號(hào)” 表示屬性屬于某個(gè)選擇器，用 “換行” 代替 “分號(hào)” 分隔屬性，很多人認(rèn)為這樣做比 SCSS 更容易閱讀，書(shū)寫(xiě)也更快速。縮進(jìn)格式也可以使用 Sass 的全部功能，只是與 SCSS 相比個(gè)別地方采取了不同的表達(dá)方式，具體請(qǐng)查看 the indented syntax reference。這種格式以 .sass 作為拓展名。

更詳細(xì)的用法請(qǐng)閱讀 SASS 官網(wǎng)文檔：DOCUMENTATION

團(tuán)隊(duì)約定

考慮到 SCSS 語(yǔ)法對(duì) CSS 語(yǔ)法友好的兼容性和擴(kuò)展性，我們?cè)谑褂?SASS 編寫(xiě)樣式的時(shí)候，統(tǒng)一使用 SCSS 語(yǔ)法

編碼格式

When running on Ruby 1.9 and later, Sass is aware of the character encoding of documents. Sass follows the CSS spec to determine the encoding of a stylesheet, and falls back to the Ruby string encoding. This means that it first checks the Unicode byte order mark, then the @charset declaration, then the Ruby string encoding. If none of these are set, it will assume the document is in UTF-8.

當(dāng)在 Ruby1.9或更新的版本運(yùn)行的時(shí)候，SASS 能識(shí)辨文檔的字符編碼。SASS 遵循 CSS 規(guī)范去確定樣式文件的編碼，進(jìn)而轉(zhuǎn)回 Ruby 字符串編碼。這意味著SASS編譯的時(shí)候會(huì)首先檢測(cè) BOM，然后到 @charset 聲明，再到 Ruby 字符串編碼，如果以上都沒(méi)有設(shè)置，SASS 會(huì)認(rèn)為文檔的編碼為 UTF-8

團(tuán)隊(duì)約定

嚴(yán)格遵守上面 “CSS規(guī)范” 中的 “編碼規(guī)范”

更多關(guān)于 SASS 編碼：SASS Encodings

SASS注釋規(guī)范

SASS 支持 CSS 標(biāo)準(zhǔn)的多行注釋 /* */，同時(shí)也支持單行注釋 //。

• 多行注釋在使用非 Compressed 模式進(jìn)行編譯后的輸出文件中會(huì)保留下來(lái)，單行注釋 // 側(cè)會(huì)被移除
• 多行注釋和單行注釋在 SASS 編譯后輸出的壓縮 CSS 文件都會(huì)被移除
• 當(dāng)多行注釋內(nèi)容第一個(gè)字符是感嘆號(hào) “!” 的時(shí)候，即 /*! */，SASS 無(wú)論用哪一種編譯方式編譯注釋都會(huì)保留
• 注釋內(nèi)容可以加入 SASS 變量

團(tuán)隊(duì)約定

SCSS 文件內(nèi)

• 全部遵循 CSS 注釋規(guī)范
• 不使用 /*! */ 注釋方式
  
• 注釋內(nèi)不放 SASS 變量

標(biāo)準(zhǔn)的注釋規(guī)范如下：

@charset "UTF-8";
?
/**
 * @desc File Info
 * @author liqinuo
 * @date 2015-10-10
 */
?
/* Module A
----------------------------------------------------------------*/
.mod_a {}
?
/* module A logo */
.mod_a_logo {}
?
/* module A nav */
.mod_a_nav {}
?
?
/* Module B
----------------------------------------------------------------*/
.mod_b {}
?
/* module B logo */
.mod_b_logo {}
?
/* module B nav */
.mod_b_nav {}

嵌套規(guī)范

選擇器嵌套

/* CSS */
.jdc {}
body .jdc {}
?
/* SCSS */
.jdc {
    body & {}
}
/* CSS */
.jdc {}
.jdc_cover {}
.jdc_info {}
.jdc_info_name {}
?
/* SCSS */
.jdc {
    &_cover {}
    &_info {
        &_name {}
    }
}

屬性嵌套

/* CSS */
.jdc {
    background-color: red;
    background-repeat: no-repeat;
    background-image: url(/img/icon.png);
    background-position: 0 0;
}
?
/* SCSS */
.jdc {
    background: {
        color: red;
        repeat: no-repeat;
        image: url(/img/icon.png);
        position: 0 0;
    }
}

變量

可復(fù)用屬性盡量抽離為頁(yè)面變量，易于統(tǒng)一維護(hù)

// CSS
.jdc {
    color: red;
    border-color: red;
}
?
// SCSS
$color: red;
.jdc {
    color: $color;
    border-color: $color;
}

混合(mixin)

根據(jù)功能定義模塊，然后在需要使用的地方通過(guò) @include 調(diào)用，避免編碼時(shí)重復(fù)輸入代碼段

// CSS
.jdc_1 {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.jdc_2 {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
?
// SCSS
@mixin radius($radius:5px) {
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
.jdc_1 {
    @include radius; //參數(shù)使用默認(rèn)值
}
.jdc_2 {
    @include radius(10px);
}
?
?
?
// CSS
.jdc_1 {
    background: url(/img/icon.png) no-repeat -10px 0;
}
.jdc_2 {
    background: url(/img/icon.png) no-repeat -20px 0;
}
?
// SCSS
@mixin icon($x:0, $y:0) {
    background: url(/img/icon.png) no-repeat $x, $y;
}
.jdc_1 {
    @include icon(-10px, 0);
}
.jdc_2 {
    @include icon(-20px, 0);
}

占位選擇器 %

如果不調(diào)用則不會(huì)有任何多余的 css 文件，占位選擇器以 % 標(biāo)識(shí)定義，通過(guò) @extend 調(diào)用

//scss
%borderbox {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jdc {
    @extend %borderbox;
}

extend 繼承

// CSS
.jdc_1 {
    font-size: 12px;
    color: red;
}
.jdc_2 {
    font-size: 12px;
    color: red;
    font-weight: bold;
}
?
// SCSS
.jdc_1 {
    font-size: 12px;
    color: red;
}
.jdc_2 {
    @extend .jdc_1;
    font-weight: bold;
}
?
// 或者
%font_red {
    font-size: 12px;
    color: red;
}
.jdc_1 {
    @extend %font_red;
}
.jdc_2 {
    @extend %font_red;
    font-weight: bold;
}

for 循環(huán)

// CSS
.jdc_1 {background-position: 0 -20px;}
.jdc_2 {background-position: 0 -40px;}
.jdc_3 {background-position: 0 -60px;}
?
// SCSS
@for $i from 1 through 3 {
    .jdc_#{$i} {
        background-position: 0 (-20px) * $i;
    }
}

注意：#{} 是連接符，變量連接使用時(shí)需要依賴

each 循環(huán)

// CSS
.jdc_list {
    background-image: url(/img/jdc_list.png);
}
.jdc_detail {
    background-image: url(/img/jdc_detail.png);
}
?
// SCSS
@each $name in list, detail {
    .jdc_#{$name} {
        background-image: url(/img/jdc_#{$name}.png);
    }
}
?
?
// CSS
.jdc_list {
    background-image: url(/img/jdc_list.png);
    background-color: red;
}
.jdc_detail {
    background-image: url(/img/jdc_detail.png);
    background-color: blue;
}
?
// SCSS
@each $name, $color in (list, red), (detail, blue) {
    .jdc_#{$name} {
        background-image: url(/img/jdc_#{$name}.png);
        background-color: $color;
    }
}

function 函數(shù)

@function pxToRem($px) {
    @return $px / 10px * 1rem;
}
.jdc {
    font-size: pxToRem(12px);
}

運(yùn)算規(guī)范

運(yùn)算符之間空出一個(gè)空格

.jdc {
    width: 100px - 50px;
    height: 30px / 5;
}

注意運(yùn)算單位，單位同時(shí)參與運(yùn)算，所以 10px 不等于 10，乘除運(yùn)算時(shí)需要特別注意

// 正確的運(yùn)算格式
.jdc {
    width: 100px - 50px;
    width: 100px + 50px;
    width: 100px * 2;
    width: 100px / 2;
}