CSS

CSS (Cascading Style Sheets) 是給 HTML 提供 UI 裝飾的標記語言
依據修飾的對象可以分為
- 排版佈局
- 顏色
- 字型
- 動畫效果

使用方法

<!DOCTYPE html>
<html lang="zh-tw">
    <head>
        <!-- 匯入 css -->
        <link rel="stylesheet" href="css 檔案路徑">
    </head>
    <body>
    </body>
</html>

Sass

Sass / SCSS 讓 CSS 可以像程式邏輯去做編寫
Sass 語法不相容 CSS 而推廣不佳
SCSS 改良了 Sass，相容 CSS 語法
是 CSS 的預處理器 (.scss 會編譯成 .css)

import (引進)

@import 用來將程式碼拆分成多個子項目
子項目以 _ 作為命名開頭

範例

把 main.scss 拆分成 _header.scss、_content.scss

/* main.scss */
@import 'header';
@import 'content';

/* _header.scss */
.header {
    position: fixed;
}

/* _content.scss */
.content {
    position: fixed;
}

variable (變數)

使用 $ 宣告變數
@use 將變數宣告拆分到子項目
- 使用時要放在最開頭處

範例

把 main.scss 的變數放在 _theme.scss，同時給 _header.scss 使用

/* main.scss */
@use 'theme' as *;
@import 'header';

/* _theme.scss */
$header_background: #000000;

/* _header.scss */
.header {
    position: fixed;
    background: $header_background;
}

inherit (繼承)

使用 % 宣告可重複套用的樣式

範例

宣告一個樣式 sidebox 給 .sidebar、.tocbar 套用

%sidebox {
    position: fixed;
    top: $header_height;
    width: 20%;
    z-index: 1;
}

.sidebar {
    bottom: 0;
    left: 0;
    @extend %sidebox;
}

.tocbar {
    right: 0;
    bottom: 0;
    @extend %sidebox;
}

mixin (函式)

可添加參數調整回傳值
範例

@mixin set-font($size, $color) {
    font-size: $size;
    color: $color;
}

body {
    @include set-font(17, #000000);
}

nesting (巢狀結構)

原本 CSS 寫法


.content {
}

.content b {
}

.content em {

}

SCSS 巢狀結構

.content {
    b {

    }

    em {

    }
}

Web

CSS

Sass

import (引進)

variable (變數)

inherit (繼承)

mixin (函式)

nesting (巢狀結構)

索引