SCSS 簡介

變數與嵌套

變數

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

body {
    color: $primary-color;
    font-family: $font-stack;
}

定義了兩個變數 $primary-color 和 $font-stack。
在 body 選擇器中使用這些變數。

Nesting

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li { display: inline-block; }
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

nav 元素中的 ul, li, 和 a 選擇器被嵌套在內部。

混合（Mixins）

SCSS 中的「混合（Mixins）」是一種重要的功能，它允許你創建可重用的代碼塊，可以在多處引入而不需要重複寫相同的代碼。這不僅使得代碼更簡潔、更易於維護，也提高了開發效率。

基本概念

定義混合：使用 @mixin 指令來定義一個混合。混合可以包含一個或多個 CSS 規則。
引用混合：使用 @include 指令來在需要的地方引用這些混合。

基本用法

定義混合

@mixin text-style {
    font-weight: bold;
    color: red;
    font-size: 18px;
}

這裡定義了一個名為 text-style 的混合，它包含了三條 CSS 規則。

引用混合

p {
    @include text-style;
}

在一個段落（p）選擇器中使用 @include 引入 text-style 混合。這將會把混合中定義的所有規則應用到這個段落上。

帶參數的混合

混合也可以接受參數，這使得它們更加靈活和強大。

定義帶參數的混合

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

這個混合 border-radius 接受一個參數 $radius，並將其應用於 CSS 的圓角屬性。

引用帶參數的混合

.box {
    @include border-radius(10px);
}

在這裡，.box 類別使用了 border-radius 混合，並傳入了 10px 作為參數。

使用混合的好處

代碼重用：避免了在不同地方重複相同的 CSS 規則，減少了代碼重複。
易於維護：如果需要更改樣式，只需修改混合的定義，所有引用這個混合的地方都會自動更新。
提高可讀性：使得代碼更加清晰和易於理解。

總的來說，混合是 SCSS 提供的一個強大工具，可以大大提高 CSS 的靈活性和可維護性。

繼承

.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success-message {
    @extend .message;
    border-color: green;
}

.success-message 通過 @extend 繼承了 .message 的樣式，並添加了新的邊框顏色。

函數與條件

函數

@function calculate-grid-width($columns: 12) {
    @return 100% / $columns;
}

.column { width: calculate-grid-width(4); }

- 定義了一個 calculate-grid-width 函數來計算網格列的寬度。 - 在 .column 類中使用這個函數。

條件語句

@mixin theme($light-theme: true) {
    @if $light-theme {
        background: #fff;
        color: #000;
    } @else {
        background: #000;
        color: #fff;
    }
}

body { @include theme(false); }

通過條件語句，根據 $light-theme 變量的值來決定背景和文字顏色。

實戰練習

創建一個包含變數的樣式表：使用 SCSS 變數來定義顏色、字體等樣式。
利用混合和繼承實現重用樣式：建立一些通用的界面元素樣式，如按鈕、消息框等。
使用函數和條件語句創建動態樣式：根據不同條件改變元素的樣式。

參考資料： - Sass Basics