編寫SASS的一些技巧

• 更好的爲變量命名

變量是Sass中最簡單的特性之一，但有時候也會使用不當。建立站點範圍內有語義化的變量，是不可或缺的工做。若是命名很差，他會變得難以理解和重複使用。

這裏有一些命名變量的小技巧，提供參考：

• 命名變量時不要含糊不清
• 堅持一種命名規則（Modular, BEM等等）
• 肯定變量的使用是有道理的

這有一個好的示例：

$orange: #ffa600; 
$grey: #f3f3f3; 
$blue: #82d2e5;

$link-primary: $orange;
$link-secondary: $blue;
$link-tertiary: $grey;

$radius-button: 5px;
$radius-tab: 5px;

這個是很差的示例：

$link: #ffa600;
$listStyle: none;
$radius: 5px;

　　

• 減小Mixins的使用

 

Mixins是實現代碼塊的一種偉大方式，能夠在一個站點內屢次使用。然而，@include定義好的Mixins和在CSS代碼中複製、粘貼沒什麼不同。它將會讓你的CSS代碼生成不少重複的代碼，讓你的文件變得愈來愈臃腫。

 

到目前爲止，Mixins只適合那種須要經過傳遞參數來快速建立樣式的情形。

 

例如:

@mixin rounded-corner($arc) {
    -moz-border-radius: $arc;
    -webkit-border-radius: $arc;
    border-radius: $arc;  
}

rounded-corner這個Mixins能夠在任何狀況下使用，僅僅經過改變其參數$arc的值，將獲得不一樣的代碼：

.tab-button {
     @include rounded-corner(5px); 
}

.cta-button {
     @include rounded-corner(8px); 
}

像這樣使用Mixins是不明智的：

@mixin cta-button {
    padding: 10px;
    color: #fff;
    background-color: red;
    font-size: 14px;
    width: 150px;
    margin: 5px 0;
    text-align: center;
    display: block;
}

這個Mixins沒有傳遞任何參數，更建議使用%placeholder來建立，這也是接下來要說的下一點。

• 擁抱Placeholder

與Mixins不一樣，%placeholder也能夠屢次使用，並且不會生成重複的代碼。這使得輸入的CSS更友好，更乾淨。

%bg-image {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    @extend %bg-image;
    background-image:url(/img/image-one.jpg");
}

.image-two {
    @extend %bg-image;
    background-image:url(/img/image-two.jpg");
}

編譯出來的CSS：

.image-one, .image-two {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    background-image:url(/img/image-one.jpg") ;
}

.image-two {
    background-image:url(/img/image-two.jpg") ;
}

多個選擇器運用了相同的%placeholder也只會輸出一次代碼。沒有引用的%placeholder是不會輸出任何CSS代碼。

和以前的Mixins配合在一塊兒使用，既可保持Mixins靈活性，並且還能夠保持代碼的簡潔與乾淨。

/* PLACEHOLDER 
============================================= */

%btn {
    padding: 10px;
    color:#fff;
    curser: pointer;
    border: none;
    shadow: none;
    font-size: 14px;
    width: 150px;
    margin: 5px 0;
    text-align: center;
    display: block;
}

/* BUTTON MIXIN 
============================================= */

@mixin  btn-background($btn-background) {
    @extend %btn;
    background-color: $btn-background;
    &:hover {
        background-color: lighten($btn-background,10%);
    }
}

/* BUTTONS
============================================= */

.cta-btn {
    @include btn-background(green);
}

.main-btn {
    @include btn-background(orange);
}

.info-btn {
    @include btn-background(blue);
}