[ 前端工具 ] - SCSS

筆記

變數

• 用符號 $ 開頭，後面加上 :

$primary: #eee;

巢狀

• 可以用 & 來表示父層選擇器

.header {
  color: $primary;
  &_h1 {
    font-size: $normal;
  }
}

檔案引入

• 假設我們把變數都放在一個相同的檔案底下 _variables.sass（底線是要引入的命名慣例）
• 可以利用 @import 來引入

@import _variable  // 副檔名要加不加都可以

規則引入(無參數版)

• 假設我們把常用樣式變成一個規則
  • 規則用符號 % 開頭
• 可以利用 @extend 引入

%btn {
  font-size: 14px;
  color: #fff;
}

.btn {
  @extend %btn;    // 套入 %btn 的規則
}

規則引入(參數版)

• 假設我們訂定一個可以帶入參數的規則
  • 這個規則要以 @mixin 開頭
• 可以用符號 + 引入

@mixin hover($color) {
  &:hover{
    background: $color;
  }
}

.btn {
  +hover($primary);
}

函式

• 寫「計算」的時候或者需要「return」東西的時候使用
• 假設我們想要寫一個 letter-spacing 跟字體大小的算式我們可以這樣寫
• 可以直接呼叫函式名稱來引入

@function letter-spacing($font-index) {
  @return $font-index / 10 * 0.2rem
}

@mixin hover($color) {
  &:hover{
    letter-spacing: letter-spacing(5rem);
  }
}

陣列 & 物件

• 陣列寫法
  • 變數形式開頭，元素間用 , 隔開

$array: center, start, end;

• 物件寫法
  • 變數形式開頭，用 () 包住，用 : 區分 key 跟 value，中間用 , 隔開

$object: (center:center, start:flex-start, end:flex-end);

迴圈

• 如果在 selector 要套入變數要加上 #{ }

• each 迴圈

  • 用 $type, $value 兩個變數來取得 object 的值

$object: (center:center, start:flex-start, end:flex-end);

@each $type, $value in $object {
  .flex-#{$type} {
    display: flex;
    justify-content: $value;
  }
}

• for 迴圈 （用來事先設定 h1~h6 很好用）

@for $i from 0 through 5 {
  .h#{5 - $i + 1} {
    font-size: 1 + 0.2rem * $i;
  }
}

判斷

• sass 的判斷只可以用兩個 =

@for $i from 0 through 5 {
  .h#{5 - $i + 1} {
    @if $i / 2 == 0 {
      font-size: 1 + 0.2rem * $i;
    } @else {
      font-size: 1 + 0.3rem * $i;
    }
  }
}

分配

_variable.scss

• 顏色、字體等等

_component.scss

• 按鈕、標題、頭貼、背景 （小範圍的元件）

_mixin.scss

• 樣式規則

_layout.scss

• navbar、footer （大範圍的元件）

pages.scss

• 把上面的檔案都 import 進來

CSS 預處理器

前端的程式是在瀏覽器上面跑的，不同瀏覽器的差異，會導致對程式指令的支援程度不同。如果寫了個非常新潮的語法，但是只能支援 Chrome 一種瀏覽器，這樣也不行。
「不能用的東西，自己轉換就能用了」在前端這個領域很常要處理這個問題，所以我們心裡要清楚，只要先設定好，在只能支援舊語法的瀏覽器上面，把程式碼轉成舊式的寫法就對了。
SCSS 這套工具的重點，就是讓你像寫程式一樣的方式來設定 CSS，再利用 CSS 預處理器的系統，幫你把你寫的程式編譯成瀏覽器能夠跑的 .css 資料

安裝方式

• npm install -g sass：這個指令可以將 sass 安裝下來
• sass input.scss output.css：可以將左邊的 scss 檔程式碼編譯成右邊的 css 檔，只要 scss 有改動過，都要執行一次指令，使 css 更新(input.scss, output.css 檔名可自訂)
• sass --watch input.scss output.css：多了這個 --watch 可以監聽你改動的動作，只要下一次這個指令，之後 scss 被改動過，都會自動幫你做編譯，可以不用不斷自己手動執行編譯指令

基本語法

• 先看看 CSS 的寫法，針對 nav 底下的 ul, li, a 分別做設定

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

// 在 scss 當中可以適用巢狀的寫法
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

• 可以利用變數，將常用的顏色先設定好，等到需要用的時候再把變數帶上去

$primary-color: #333;

body {
  color: $primary-color;
}

• & 這個符號，可以「代表自己」，下面示範 hover 的寫法

//CSS 的寫法

div {
  color: red;
}

div:hover {
  color: blue;
}

// SCSS 的寫法

div {
  color: red;

  &:hovor {
    color: blue;
  }
}

• 可以利用 function 的方式，將常用的設定給命名，在需要的地方引入

// 將常用的方式命名
@mixin full() {
  height: 100%;
  width: 100%;
}

// 在需要的地方引入
.box {
  @include full();
  color: red;
}

• @mixin 代表宣吿一個 function
• @include 代表引入 function
• 在引入的時候是可以傳參數進去的，所以 function 也可以按照帶入的參數做處理

幾個小技巧

• 命名方式可以依據：
  • 設計師給的編號：ex. $grey-01
  • 它的使用時機：ex. $error-01 , $font-size-title, $font-size-normal
• 可以多使用 & 來寫，相似的東西更方便管理： (& 的使用一定是在某個大括弧底下)

// CSS 的寫法
navbar {
  display: flex;
  justify-content: spacebetween;
  align-items: center;
}

navbar__left {
  margin-left: 10px;
}

navbar__left input[type="text"] {
  font-size: 30px;
}

navbar__middle {
  padding: 1em;
}

navbar__right {
  margin-right: 10px;
}

// SCSS 的寫法
$font-size-input: 30px;

navbar {
  display: flex;
  justify-content: spacebetween;
  align-items: center;

  &__left {
    margin-left: 10px;

    & input[type="text"] {   // 這邊的 & 指的是 navbar__left
      font-size: $font-size-input;
    }
  }

  &__middle {
    padding: 1em;
  }

  &__right {
    margin-right: 10px;
  }
}