Sass 學習筆記(三) – Import 與 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;
}

1 Comment

  1. 好像還有一個 @extend

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料