SASS / SCSS 使用筆記

2021-07-26

筆記使用 SASS / SCSS 讓網站開發更為便利的方式。首先會談論 SASS 與 SCSS 的差異，接著再說明如何將 SASS 轉換為 CSS 讓瀏覽器可以解讀，同時在開發過程如何藉由 sass-loader 將 sass 動態載入即時預覽效果，並整理個人在開發中所使用到的語法。

JavaScript logo

說明

Abbreviation Meaning
SASS Syntactically Awesome Style Sheets.
SCSS Sassy CSS.
CSS Cascading Style Sheets.

SASS VS SCSS

SASS 在撰寫上不需要 semicolon (分號) 與 curly bracket (大括弧)；而 SCSS 則是如同傳統 CSS 的寫法，但如同 SASS 支援 Variables、Mixin 等功能。目前對於 SASS / SCSS 仍不十分仰賴的情況下，仍習慣與 CSS 語法更為接近的 SCSS。

Variables

定義可以共用的數值，例如顏色、大小、長寬等資訊，可以做到修改單一變數值，一次調整好所有共用設計的便利功能。使用的方式是使用 $ 符號宣告變數。

Mixin

可以簡化處理網頁 RWD 時 CSS 編輯的繁瑣作業，只要先定義好各種 media，在元件的 Style 設定僅需要 include 即可。

$desktop: 'min-width: 1024px';
$tablet: 'max-width: 1024px';
$mobile: 'max-width: 600px';

@mixin desktop{
  @media($desktop){
    @content;
  }
}
@mixin pad{
  @media($tablet){
    @content;
  }
}
@mixin mobile{
  @media($mobile){
    @content;
  }
}

.component-style{
  margin-top: 20px;
  @include mobile{
    margin-top: 5px;
  }
}

參考資料

Learn Sass

#F2E #Dev