SCSS

可程式化階層式開發 CSS

安裝編譯套件

VSCode > 延伸套件 > Live Sass Complier

建議專案結構

flowchart LR
    A[fa:fa-folder project root]
    A-->dist[fa:fa-folder dist]
    dist-->css[fa:fa-folder css]
    dist-->js[fa:fa-folder js]
    dist-->images[fa:fa-folder images]
    dist-->index[fa:fa-file index.html]
    css-->|fa:fa-ban 禁止異動| cssfile[fa:fa-file some.css]
    A-->src[fa:fa-folder src]
    src-->scss[fa:fa-folder scss]
    scss-->scssfile[fa:fa-file some.scss]
    scssfile-->|fa:fa-bolt 編譯產生| cssfile

編譯設定

Windows: Ctrl + Shift + P

Mac: Command + Shift + P

> Open Workspace Settings (JSON)

{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/dist/css"
        }
    ],
    "liveServer.settings.root": "/dist",
    "liveServer.settings.CustomBrowser": "chrome"
}

format 編譯格式

compressed 最小化 (Production)
expanded 展開 (Development)

extensionName 編譯後副檔名

savePath 編譯後檔案放置路徑

live sass compiler 設定

啟動 watch

VSCode 右下角 Watch my Sass

變數

scss

$main-color: red;

.container {
    color: $main-color;
}

css

.container {
    color: red;
}

$ 大部分語言都是變數的意思

運算

scss

$header-height: 70px;

#header {
    height: $header-height;
}

#wrap {
    padding-top: $header-height + 70;
}

css

#header {
    height: 70px;
}

#wrap  {
    padding-top: 140px;
}

巢狀 (Nesting)

scss

#header {
    background: yellow;

    &:hover {
        background: blue;
    }

    .title {
        color: red;
    }
}

css

#header {
    background: yellow;
}

#header:hover {
    background: blue;
}

#header .title {
    color: red;
}

預設為『後代』選擇器，& 代表自己

匯入 `@import`

將檔案內容複製進來

_reset.scss

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

scss

@import 'reset';

#header {
    background: yellow;
}

css

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#header {
    background: yellow;
}

使用 @import 匯入檔案
匯入檔案名稱不需要加 _ 與副檔名 .scss
被匯入檔案，檔案名稱最前面為 _ 可避免被編譯器編譯
被匯入檔案，通常為共用屬性，不會單獨使用

混合 `@mixin`

scss

@mixin container {
    width: 1140px;
    margin: 10px auto;
}

#header {
    color: red;
    @include container;
}

css

#header {
    color: red;
    width: 1140px;
    margin: 10px auto;
}

@mixin 宣告

@include 使用

擴展 `@extend`

scss

#header {
    color: red;
    height: 300px;
}

#header2 {
    @extend #header;
    background: yellow;
    color: blue;
}

css

#header, #header2 {
    color: red;
    height: 300px;
}

#header2 {
    background: yellow;
    color: blue;
}

附加選擇器到 @extend 目的位置

函數 `@function`

scss

@function add-margin($value, $type: px) {
    @return $value + 30 + $type;
}

#header {
    background: red;
    margin: add-margin(20);
}

#wrap {
    margin: add-margin(10, em);
}

css

#header {
  background: red;
  margin: 50px;
}

#wrap {
  margin: 40em;
}

前端開發