Sass 學習筆記（三） – Import 與 Mixins

• Import – 載入其他 Sass 檔
• Mixins

Import – 載入其他 Sass 檔

Sass 也能夠載入其他 Sass 檔案，將龐大的程式碼切割成不同的檔案，是有利於程式碼維護的，例如將 Sass 變數額外獨立一個檔案，便可以更輕鬆地進行維護。

拆分的檔案的命名要以底線為開頭，例如：_example.scss， Import 的話則只要輸入example就好了，請看以下範例：

// _reset.scss
html,
body,
ul,
ol {
    margin: 0;
    padding: 0;
}

// main.scss
// 載入 _reset.scss
@import 'reset';
body {
    font: 100% Helvetica, sans-serif;
    background-color: #efefef;
}

Mixins

Mixins 不知道中文叫什麼，在 Sass 簡單來說就是類似函式一樣可以傳值，然後繼承裡面的屬性，一開始要先用@mixin來定義，然後再用@include呼叫。

// mixin 範例

// 定義 mixin
@mixin border-radius($radius){  //include 時要傳入一個值
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

.box {
    //呼叫 mixin
    @include border-radius(10px);
    
    //以上等同於以下
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}