本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。

雖然這跟React本身沒什麼關係，不過因為是第一次用SCSS編輯style，還是筆記一些 SCSS 的語法。

SASS/SCSS 是種用來撰寫網頁樣式的語言，撰寫後會在被編譯成傳統css供網頁使用，所以也被稱為css預處理器。

SASS/SCSS將一些程式模組化的概念作成css語法擴充，像是巢狀構造、變數、Mixin等等，改善閱讀性與管理性。

至於SASS與SCSS間的差異僅在於SASS語法上使用縮排編輯巢狀關係，而SCSS較貼近原生CSS，使用大括號將選擇器分開，使用分號將屬性分開。

這次只使用到SCSS語法，故以下簡介皆以SCSS為例。

Nesting

對應css中像是

.App .navbar{...}

.App .board{...}

這種根據父節點class的選擇器，原生css需要分開好幾個帶.App 的選擇器撰寫，常常分開寫就搞不清哪些子節點已經定義了，或是忘了加父節點導致名稱衝突。

SCSS以巢狀構造對應這個問題，像上面的範例可以寫成:

.App{
    .navbar{...}
    .board{...}
}

將子節點包在父節點中，撰寫單純且關係明確。

Parent Selector

對應css中像是

.title.editing{...}

選擇同時帶有複數個class時的方法，SCSS中可以用巢狀配合 & 選擇器撰寫:

.title{
  &.editing{...}
}

& 選擇器很方便，也可以用在效果選擇上:

.clickable{
  &:hover {...}    /* 等於css的.clickable:hover

  &:active {...}   /* 等於css的.clickable:active
}

Variables

定義"一個"屬性為變數，方便識別與重複使用。

範例:

$font-stack: Helvetica, sans-serif;  //定義變數
$primary-color: #333;

body {
  font: 100% $font-stack;  //參照變數
  color: $primary-color;
}

自訂變數對應到某個屬性，用來定義顏色名子很方便。

上面的SCSS被編譯成CSS會是:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Mixins

當有"一組"想要重複使用的屬性，可以用Mixins方法打包，還可以帶參數。

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

使用時用 @include 指令:

.box { @include transform(rotate(30deg)); }

Modules

當SCSS太大包想要拆分的時候，可以用scss的模組化方法。

撰文時點SCSS同時存在兩種方法: @use 跟 @import。
SASS官方說明未來會朝全面使用@use的方向前進，但已存在的模組還未全面支援@use，像是node-sass基礎的LibSass就不支援，還是只能用@import。

至於兩種方法的差異在介紹@use時說明。

@import

要作為模組載入的scss檔案，名稱前面必須帶有底斜線，像是 _partial.scss。

做好要導入的模組後，就可以用 @import 全部導入:

// foundation/_code.scss
.code {
  padding: .25em;
  line-height: 0;
}

// style.scss
@import 'foundation/code';

也可以在巢狀構造中導入

// _theme.scss
.code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

// style.scss
.theme-sample {
  @import "theme"; 
}

//以上範例相當於
.theme-sample {
  .code {...}
}

@use

撰文時點僅 Dart Sass 支援此功能。

模組檔案的創建跟@import相同，最前面要帶有底線。

跟@import不同的是，@use引入的只是參照。

要調用導入模塊中的方法要另外撰寫。

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

在style.css中導入base的參照後，只取用base中$primary-color這個變數，指令跟js中的object很像:

base.$primary-color

@import會不容分說的把模組中的樣式全部導入，一個不注意還是會產生命名相衝的狀況，相較之下@use在導入後可以只選擇需要的部分使用，而且用帶上模組名稱的方式呼叫，衝突的可能性就降低許多。

References:

• Sass Basics - Sass
• Parent Selector - Sass