CSS保健室｜SASS基礎運用介紹｜六角學院

前言

前陣子因為要準備寫大型專案而去學 SASS ，雖然後來因為看不懂別人寫的程式，所以在接手時無法接續維護、修改而作罷，但也為我的 SASS 之路建立了一些基礎，接下來會介紹從六角學院 youtube 看到的 Sass 基礎運用介紹 - (附有開發環境) 影片內容，那就開始吧！

（ 圖片來源 ）

SASS vs SCSS

SCSS 比較貼近平常在寫 CSS 的狀態，包含標籤及大括號，而 SASS 取消大括號改成以縮排方式呈現，如果是初心者的話，建議先從 SCSS 開始練功。

SASS

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

SCSS

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

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

SCSS 編譯前後的樣子

記得要先下載 node.js

巢狀結構

用 & 代表本屬性，多用於偽元素、狀態、hover...情況。
用 > 代表下一個子層級。
用 lighten 或 darken 來作色彩運算（ 變亮 / 暗 ）。

能透過 SCSS 將變數取代與運算。

$primary-color: #000; //宣告變數
$width: 200px; //宣告變數

.btn {
    color: $primary-color; //變數的取代
    &:hover {
        color: white;
    }
    &.active {
        background-color: lighten($primary-color,50%); //變數的運算
    }
    &::after {
        content: "";
    }
    & > .icon {
        color: red;
        width: $width / 2; //變數的運算，要記得先乘除後加減的觀念
    }
}

上面的 SCSS 編譯成 CSS 後的樣貌

.btn {color: #000;}
.btn {color: white;}
.btn.active {background-color: #555;}
.btn::after {content: "";}
.btn > .icon {
    color: red;
    width: 100px;
}

什麼時候要宣告成變數

1. 初學者建議所有色彩、尺寸都設定
2. 初學者不建議用兩層以上的巢狀結構
3. 當一個值出現兩次以上

@import

把個別寫好的 SCSS 檔案作引入。

video.scss //把video元件另外寫個scss檔案，並放在components資料夾內

@import "components/video"; //如果只有首頁會吃這個檔案，那就可以在index.scss裡把它引入

不編譯的 SCSS 檔名前要加下底線

如果該 SCSS 檔沒有要讓它編譯成 CSS 檔，那就在檔名前加上 下底線(_) 符號。

import 建議的順序

1. 變數
2. reset
3. 一般標籤定義
4. 所有文件定義

mixin（ 把外部的運算帶進來 ）

只要寫一小段就可以產出大量程式碼，算是 SCSS 裡的多重影分身之術呀！

@mixin btnColor($color) {
    background-color: $color;
    &:hover {
        background-color: darken($color,15%);
    }
}

.btn-red {
    @include btnColor(red);
}

extend（ 把目前 CSS 擴增出來 ）

常使用在 clearfix 上，由於比較無法良好維持 CSS 的結構，容易造成失控，如同風遁・螺旋手裡劍，在使用上需更加謹慎一點。

%clearfix {
    &::after {
        content: "";
        display: table;
        clear: both;
    }
}

.box {
    @extend %clearfix;
}

function

善用 function 可以讓網頁有更多的變化，並且提高網頁的一致性，就像牙與赤丸在協作的基礎下開發出牙通牙、牙狼牙及三頭狼等等招式。

$base-font-size: 16px;

@function newFontSize($size) {
    @return $base-font-size * $size;
}

h2 {
    font-size: newFontSize(2);
}

資料來源

Sass 基礎運用介紹 - (附有開發環境)