SASS 環境部署與基礎

SASS 重點

Variables 變數
Nesting 巢狀
Partials / Imports
Functions & Mixins 函式 & 巢狀
Conditionale 條件式
Operators & Calculations 必較與計算子
Color Functions 顏色函式
使用 NodeJs 佈署 SASS 環境

在資料夾裡面安裝 SASS 編譯器：node sass

1.先確認有安裝 npm 2.輸入 npm init -y 初始化並給予預設值 3.檔案夾裡會有一個自動生成的 package.json 4.在終端機安裝 node sass ：npm install node-sass 5.在檔案夾裡會生成 node_modules，同時在 package.json 裡也會自動增加 node-sass 的版本號 6.打開它修改預設檔案生成位置，修改 script，將 test 拿掉，改成：
"sass": "node-sass -w scss/ -o dist/css/ --recursive"
-w 監控 scss 檔案夾，-o output 編譯輸出至 dist/css 這個檔案夾。 7.至根目錄，增加 scss 和 dist 等檔案夾，並在 scss 檔案夾裡增加 scss 檔案：main.scss 8.先在終端機執行 npm run sass 指令，啟動 sass 監聽 9.在 main.scss寫些簡單的 sass，儲存後，會顯示編譯完成，並且在 dist 自動生成 css 檔案夾和main.css。 10.想退出監聽模式可 control + c 結束監聽。

(6)也可加入其他參數

啟動監聽後，在每次更新存檔時會自動更新網頁，如有修改後網頁沒變化，可跳出 sass 再重啟，通常可解決此問題。

SASS 變數

將變數統一整理到 _variables.scss 裡，並在main.scss 裡以@import 'variables' 引入。
常用的變數名：

$primary-color
$secondary-color
$light-color
$dark-color
$font-stack

SASS 自帶的函式

lighten(顏色;百分比); sass 會自動計算顏色深淺。

$primary-color:#00cc99;

body {
  color: $primary-color;
  background_color:lighten($primary-color, 45%); /* 自動計算顏色變淺 */
}
darken($primary-color, 15%);
/* 自動計算顏色變深 */

SASS 巢狀

在 sass 的巢狀結構裡，我們可以使用更簡潔的方式來表示結構：

<section class="section section-a">
    <h2>Hello Paris</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </section>
  <section class="section section-b">
    <h2>Hello taipei</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </section>

scss 可以用巢狀的&-a表示是指向哪一個section

.section {
  padding: 2rem;
  h1 {
    color: $primary-color;
  }
  &-a {
    background-color: $primary-color;
    color: $light-color;
  }
  &-b {
    background-color: $secondary-color;
    color: $light-color;
  }
}

==要避免過度巢狀，多用在偽元素、狀態、hover…。==
例 : &:hover { … ; &.active { … ; &:after { …

.btn {
  display: inline-block;
  padding: 12px;
  color: white;
  backgroung-color: $primary-color;
  &:hover {
    backgroung-color: darken($primary-color, 15%);
  }
  &.active {
    backgroung-color: darken($primary-color, 15%);
  }
}

Mixin 精華

使用情境，按鈕很多想做不同色彩。

$primary-color: #00cc99;
@mixin btnColor($color) {
  background-color: $color;
  &:hover {
    background-color: darken($color, 15%);
  }
}
.btn {
  display: inline-block;
  padding: 1rem;
  color: #fff;
}
/* 創見一個btn 並用傳入的顏色給予背景色 */
.btn-primary {
  @include btnColor($primary-color);
}

Extend

Sass 的 @extend 可以將相同的樣式整理在一起，在其他語言來說是非常帥氣的技法，但在 CSS 中請警慎使用。

OOCSS 概念，在撰寫 CSS 時要盡可能符合兩個原則，==結構與樣式分離、容器與內容分離==，所以到這邊為止還是要貫徹這個概念，當使用 @extend 時如果會造成這個缺陷時，請避免使用。

1 2	<div class="btn-light">Read more</div> <div class="btn-dark">Read more</div>

%btn-read-more {
  display: inline-block;
  padding: 0.27rem 2rem;
  border: none;
  text-decoration: none;
  margin-top: 1rem;
  cursor: pointer;
}
.btn {
  &-light {
    @extend %btn-read-more;
    background-color: $light-color;
    color: $dark-color;
  }
  &-dark {
    @extend %btn-read-more;
    background-color: $dark-color;
    color: $light-color;
  }
}

如果認為以上寫法較容易導致混亂，也可寫成這樣：

.btn-light {
  @extend %btn-read-more;
  background-color: $light-color;
  color: $dark-color;
}
.btn-dark {
  @extend %btn-read-more;
  background-color: $dark-color;
  color: $light-color;
}

Mixin & Extend 比較與應用

究竟 Mixin 與 extend 的使用時機該如何抉擇？基本上來說，
@mixin 是將程式碼帶入到對應的 class 去，同時可帶入變數。
@extend 則是藉由 class 合併，並吃到共通樣式，但==無法帶入變數==。
30 天掌握 Sass 語法 - (7)利用 Sass「@extend」，讓你無痛合併 CSS 樣式

運算式：

會先乘除、後加減

$width: 200px;
$height: 400px;

.box {
  width: $width / 2;
  height: ($height - 4) / 2;
}

Function 函式

可自創函式來處理許多繁瑣的事，例如自動辨別在深色底使用淺色字，反之，或是需要前贅詞讓瀏覽器相容的部份，也可一併用 function 處理。
方法：產生_functions 再以@import在主 scss 裡引入。
例一：

// _functions
// Set Text Color 自動偵測字體顏色該深or淺
@function set-text-color($color) {
  @if (lightness($color) > 50) {
    @return #000;
  } @else {
    @return #fff;
  }
}
// Transform mixin 轉換小動畫
// 因 css transform 最好有前贅詞讓瀏覽器相容，可統一整理在這裡就不需要每次都寫
@mixin transform($property) {
  --webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

// main.scss
.btn {
  &-light {
    @extend %btn-read-more;
    background-color: $light-color;
    color: set-text-color($light-color);

    // hover 動畫效果
    &:hover {
      @include transform(rotate(-10deg));
      // 讓背景變深或淺
      background-color: darken($light-color, 15%);
    }
  }
}

HSL function 是常用到的函式，HSL 是色彩學中的色相、明度、彩度。adobe 色相環

規劃 Sass 結構 @import 的用法

@import 的的功用在於可以將 CSS 檔案進行切割，如果是單純要被匯入整合 Sass 檔，而並沒有要轉出成 CSS 檔案，在檔案名稱前面加個下底線『_』，例：_button.css 就不會被編譯了。

基本的設計：

@import mixin //放置所有Sass全域變數與Mixin
  @import reset // reset.css
  @import extnd // 拿來合併樣式，都放@extend用的檔案
  @import layout //共同框架
  @import index //首頁
  @import page //內頁
  @import xxx;

@import 最前面先放全域變數與 ==mixin==，原因是因為前面@import 有寫到變數的地方找不到值，所以自然系統沒辦法編譯出來。

接著 ==reset== 檔案，
網頁排版須先將所有瀏覽器預設樣式都統一，所以用 reset 統一。放在 mixin 前或後沒有差，因 mixin 都是變數而已，可以依照自己習慣放置。但也可能會在 reset 裡面導入全域變數，所以放第二有它的道理。

@extend 與@mixin 並不會實際產生 code，只有呼叫才會合併與匯出

第三個 ==extend== 是拿來合併 css 樣式用的，在設計網頁時，會發現有些樣式應可以抽出來進行合併動作，所以就會統一放在要合併的位置，就統一來放置@extend 的語法。

==layout== 是網頁版型的共通設計，也就是無論哪一頁都會有的樣式，如：表頭、表尾
接著是不同頁面性質與區塊的分割，==index== 首頁、==page== 內頁，依單元數量視情況來切割，Sass @import 的主要用就是希望你可以把 CSS 進行切割，這樣在編輯 CSS 時就可以聚焦於某功能來進行瀏覽，將檔案歸類完善，找 CSS 相對也會方便許多。

國外 Sass Way 介紹的 Sass 結構

stylesheets/
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules 將所有 modules 引入到這裡(A)
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins + global project variables 將所有 partials 引入到這裡(B)
|   |-- _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 將(A)、(B) 引入這裡，與其他的partials

此份規劃的 Sass 架構還有分資料夾，將各類功能與模組分得更細：
==modules== 主要是放各種元素的模組，
== partials== 則是放置主結構的 CSS，
== vendor==則是統一放別人寫好的 Sass Framework，
所以 Sass 的主檔案就會這樣子去寫@import：

// Modules and Variables
@import 'partials/base';

// Partials
@import 'partials/reset';
@import 'partials/typography';
@import 'partials/buttons';
@import 'partials/figures';
@import 'partials/grids';
// ...

// Third-party
@import 'vendor/colorpicker';
@import 'vendor/jquery.ui.core';

組件化的變數抽離

在每一個區塊的 sass 裡，雖然已經使用了引入的變數，但為了組件的可重複性，也就是說，例如 header 或 footer 可以拿去給別的專案用，就可以再把每個 sass 裡的變數提取出來，以便日後只要改最上頭的變數列表即可。

$footer_font_color: lighten($dark-color, 15%);
$footer_background_color: darken($light-color, 15%);
$footer_link_color: $primary-color;

footer {
  width: 100%;
  text-align: center;
  color: $footer_font_color;
  padding: 2rem 0;
  background-color: $footer_background_color;
  font-family: $font-base;
  .link {
    color: $footer_link_color;
  }
}

參考網站