SCSS Variable、@import 新手筆記│鼠年全馬鐵人挑戰 #15

CHEN

4 min readMay 10, 2020

當 CSS 寫得越來越多之後，可以透過 Sass 來提升寫 CSS 的效率，之後要維護管理上也會比較方便。

準備環境

安裝 VSCode 的 Live Sass Compiler 工具就可以完成編譯了~

Live Sass Compiler

Watch Sass

Watch Sass 用力按下去就對了 !!!

可以將 style.scss編譯成style.css 和 style.css.map ，而且每儲一次檔案就會幫你自動編譯一次。必裝 !!!

CSS 、 SCSS 、 Sass 差別

傳統 CSS 寫法比較繁瑣，很多重複性的字會不斷出現，例如 :

/* CSS 寫法*/.menu{
    display: flex;
}
.menu h2{
    margin-bottom: 2rem;
}
.menu ul{
    margin-bottom: 2rem;
}

Sass 又分為兩種寫法，一種是 SCSS ，另一種是 Sass。因為我比較眼殘，所以比較喜歡 SCSS 有 {} 的寫法 XDD，而且 SCSS 可以完全當成 CSS 來寫，對新手也比較友善。

這個寫法是 SCSS (塊語法)，存檔就用 .scss 當副檔名。

/*  SCSS 寫法 */.menu{
    display: flex;
    
    h2{
        color: red;
    }
    ul{
        margin-bottom: 2rem;
    }
}

這個寫法是 Sass (縮排語法)，存檔就用 .sass 當副檔名。

/*  Sass 寫法 */.menu
    display: flex;
    h2
        color: red;
    ul
        margin-bottom: 2rem;

變數 Variable

可以透過 sass 的變數來做 CSS 管理，而變數的符號為 $ 錢字號。

一般 CSS 寫法 :

h2{
    margin-top: 20px; 
    color: #3bbfce;
}
p{
    margin-top: 10px; 
    color: #3bbfce;
}

透過變數 Variable 來做管理 :

$margin-top: 20px;
$text-color: #3bbfce;h2{
    font-size: $margin-top;
    color: $text-color;
}
p{
    font-size: $margin-top / 2;  /* 有支援運算 */
    color: $text-color;
}

匯入 @import

可將多個 SCSS 檔案彙整成一隻檔案

假設有 _variable.scss 、 _base.scss 、_main.scss 、 _reset.scss 多隻檔案想要彙整成一隻 all.scss，就可以用 @import 來實現。

以上這些要匯入的檔案名稱前都會 _ 這個符號，主要是不要被當成一般 scss 檔案讀取。

/* 這是 all.scss 檔案 */@import "variable"; 
@import "reset"; 
@import "base";
@import "main.scss";

SCSS 常見問題

後面一定要加上「;」，不然會編譯錯誤。
注意不要寫得太 “巢”，做多不要超過 4 層，不然網頁載入速度會變慢。
變數裡面還可以帶變數。
import 順序會影響載入順序。
如果有編譯錯誤，錯誤訊息會顯示在編譯出的 CSS。