分享與記錄個人使用 scss 時的那些 wow 點

在前端學習進度上，目前走到了 Javascipt，幾週前開啓 scss 時，感到有點陌生啊~~ 人的記憶不可考，尤其是我的！而如鐵人主題所說，scss 也讓我有 " wow~原來是這樣啊 " 的時候，所以決定整理一篇使用 scss 時，覺得需要注意一下，或是覺得很好用的地方，也記錄一下我對 scss 的記憶，以便後續又金魚腦的自己。

最基礎的精華都在官網裡

一開始學習時，先閱讀官網 LEARN SASS 中 Sass Basics 的部分，官網寫的清楚明瞭，每個範例都可以切換 Sass / Scss / 編譯後的 CSS，可以掌握大部分的基礎知識，接著在看看別人分享的程式碼，就可以吸收理解別人的邏輯。

Sass 與 Scss 的差別

Sass 與 Scss 的差別僅在於有無使用 { } 包覆程式碼，例如：nav 中的 ul。

Sass：使用縮排方式表達階層關係

nav
  ul
    margin: 0
    padding: 0
    list-style: none

Scss：使用{ }表達階層關係

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

個人比較偏好 Scss 的使用方式，當你寫了一大串程式碼的時候，只要找 { } 就可以確認階層關係。我是不相信自己可以一眼看出 Sass 的階層關係的。

資料夾架構

在 SCSS 中，可以分類程式碼，再利用@import 引入程式碼，使程式碼可以很有結構的呈現在檔名及資料夾上。資料夾架構參考了 The Sass Way 當中的 How to structure a Sass project 這篇文章。

|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins+global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file

在其他教學文章中，也有其他架構方式，但這是我最喜歡也覺得最明瞭的一種。常用的變數，例如 container 寬度，放在 modules 中。元素區塊，例如 button 等，放在 partials 中。

Nesting 與 BEM 命名方式

經常在 Scss 教學文中，看到作者們提醒不要過度使用 Nesting，否則編譯後的 CSS 程式碼，會看到很可怕很冗長的選擇器，官方建議不要超過 3~4 層。

在命名 class 名稱時，我的習慣是使用 BEM 命名方式，每個 class 名稱富含階層意義。就可以利用 & 繼承前面的 class 名稱，那麼即使我寫了很多層，編譯出來也只會是一個單獨的選擇器名稱。

例如有一個 html 架構是這樣的：

<div class="product">
    <div class="product__intro">
      <div class="product__intro__title"></div>
      <div class="product__intro__description"></div>
    </div>
</div>

Scss 就可以這樣寫：

.product__intro {
   background-color: pink;
   width: 50%;
   &__title {
      font-size: 30px;
   }
   &__description {
      font-size: 15px;
   }
}

CSS 編譯結果會是這樣：

.product__intro {
 background-color: pink;
 width: 50%;
}
.product__intro__title {
 font-size: 30px;
}
.product__intro__description {
 font-size: 15px;
}

利用變數和 mixin 寫好我的 RWD

最後分享的是我愛不釋手的 RWD 撰寫方式，這個方式是在 聖誕老人送禮物 官網中分享一篇文章 使用sass mixin來開發responsive網站。這個方式理解時沒有非常直觀，但用起來非常直觀。

首先我們在剛剛 modules 資料夾中，會撰寫好網站可能會有的幾個尺寸。像是這樣：

//width
$width--phone: 343px;
$width--minipad: 580px;
$width--pad: 880px;
$width--pc: 1300px;

接著撰寫 mixin ：以手機尺寸爲範例，給它一個有意義名稱爲 mediaquery_pc，從名稱就可以知道這個東西跟 mediaquery 有關，而且是電腦尺寸。接著撰寫 RWD 都會寫的媒體查詢 @media all and (min-width: $width - pc) 媒體查詢，內容是 @content ，表示在再傳回寫入的內容。

@mixin mediaquery_pc{
    @media all and (min-width: $width--pc){
        @content;
    }
}

在需要使用 RWD 時，如下撰寫：

img {
   width: 100%;
   height: 246px;
   object-fit: cover;
   @include mediaquery_minipad {
     width: 100%;
     height: 186px;
   }
   @include mediaquery_pad {
     width: 100%;
     height: 194px;
   }
   @include mediaquery_pc {
     width: 100%;
     height: 268px;
   }
}

編譯後的 CSS ：

img {
  width: 100%;
  height: 246px;
  object-fit: cover;
}
@media all and (min-width: 580px) {
  img {
    width: 100%;
    height: 186px;
  }
}
@media all and (min-width: 880px) {
  img {
    width: 100%;
    height: 194px;
  }
}
@media all and (min-width: 1300px) {
  img {
    width: 100%;
    height: 268px;
  }
}

以上是學習 scss 時的分享:)