[前端工具] CSS 預處理器:SCSS


Posted by Nicolakacha on 2020-09-09

市面上有很多種 CSS 預處理器能夠幫助我們撰寫更有結構及邏輯的 CSS,在協作大型專案時,使用變數也能讓 CSS 變得更容易維護,以下會簡單介紹一下 SCSS 的用法

Sass/SCSS

2007 年誕生的 Sass 是最早的預處理器,最初為了搭配 HAML 的寫法(一種縮排式 HTML 語法),也設計成縮排式寫法,所以在 Sass 的語法中不寫大括號及分號:

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

但如此一來就沒辦法兼容原生的 CSS,所以才發展出來可以兼容 CSS 寫法的 SCSS,以下會簡單介紹 SCSS 的基本使用:

如何使用

在終端機執行安裝

npm install -g sass

查看版本

sass --version

建立 scss 檔案,並在終端機執行下列指令以自動轉換成 css

sass --watch input.scss output.css
// 第一個參數是要編譯的 scss,第二個參數是編譯出來的 css

使用變數

$primaryBtn: rgb(56, 146, 142)
header button {
    background: $primaryBtn;
}

階層式管理

header {
    button {
        background: $primaryBtn;
        &:howver {
            content: "Helloooo"
        }
    }
}

引入

@import "./header.scss"

Mixin

@mixin flexCenter() {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

header {
    @include flexCenter();
}

Mixin 和變數的搭配使用

@mixin flexCenter($direction, $background) {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-display: $direction;
  background: $background;
}

header {
  @include flexCenter(column);
  background: lightblue;
}

div {
  @include flexCenter(row, blue);  
}

繼承

main.sass

header {
    background: red;
}

style.scss

@import "./main"

.contact {
    @extend header;
}

運算

.contact {
    width: 100% - 20%;
}

#SCSS







Related Posts

MTR04_0801

MTR04_0801

Day 93

Day 93

Laravel Cors middleware

Laravel Cors middleware


Comments