3 篇文章含有標籤「SCSS」

SASS 語法介紹入門教學筆記 | 學習筆記

2024年7月1日 · 閱讀時間約 5 分鐘

kdchang

SASS（Syntactically Awesome Style Sheets）是一種 CSS 預處理器，旨在提升 CSS 的功能性，讓開發者能夠以更加靈活和高效的方式編寫樣式表。它提供了許多比 CSS 更強大的功能，例如變數、巢狀規則、混合（mixins）、繼承等。SASS 語法有兩種主要形式：一種是較為常見的 SCSS（Sassy CSS），另一種則是 SASS，本文將主要介紹 SASS 語法。

與 SCSS 不同，SASS 語法採用的是縮排語法，即不使用大括號和分號，而是利用縮排來結構化程式碼。這種語法更簡潔，對於習慣 Python 等語言的開發者來說，學習曲線較為平滑。

安裝與設置

要開始使用 SASS，首先需要安裝 SASS 編譯器。最常見的安裝方式是透過 Node.js 的 npm（Node Package Manager）。請按照以下步驟進行安裝：

確保已經安裝了 Node.js 和 npm。
打開終端機，並在專案資料夾中執行以下命令來安裝 SASS：
```
npm install -g sass
```
安裝完成後，可以通過命令行執行 SASS 編譯命令：
```
sass input.sass output.css
```

這樣，input.sass 就會被編譯為標準的 output.css 檔案。

SASS 語法介紹

1. 變數（Variables）

SASS 的變數功能讓開發者可以將顏色、字體大小、間距等常用值儲存在變數中，這樣能夠提高樣式的可重用性，並讓程式碼更具維護性。在 SASS 中，變數以 $ 符號開頭。

$primary-color: #3498db
$font-size: 16px

body
  font-size: $font-size
  color: $primary-color

在這段程式碼中，我們定義了 $primary-color 和 $font-size 兩個變數，並將其應用於 body 樣式中。這樣，只需要修改變數的值，即可全局更新相應的樣式。

2. 巢狀規則（Nesting）

SASS 支援巢狀規則，這樣可以讓樣式更加結構化，並且簡化對於子元素樣式的編寫。SASS 使用縮排來表示層級關係，這一點與傳統的 CSS 需要寫出完整選擇器有所不同。

nav
  background-color: #333
  ul
    list-style-type: none
    padding: 0
  li
    display: inline-block
  a
    color: white
    text-decoration: none

這段程式碼會被編譯為：

nav {
  background-color: #333;
}
nav ul {
  list-style-type: none;
  padding: 0;
}
nav li {
  display: inline-block;
}
nav a {
  color: white;
  text-decoration: none;
}

這樣的寫法可以避免寫重複的選擇器，並且清晰地表現出元素之間的層級結構。

3. 混合（Mixins）

混合是 SASS 中一個非常有用的功能，它可以將一段可重用的樣式封裝成一個混合，並且可以接受參數，實現樣式的動態應用。混合類似於函數，能夠在不同地方重複使用。

=mixin border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

.box
  @include border-radius(10px)

在這段程式碼中，我們定義了一個名為 border-radius 的混合，接受一個 $radius 參數，用來設置元素的邊框圓角。然後，我們在 .box 中使用 @include 引入這個混合，並傳遞具體的參數。這樣，當需要改變邊框圓角的樣式時，只需要修改混合的參數，而不需要在多個地方重複編寫。

4. 繼承（Inheritance）

SASS 提供了繼承功能，使得一個選擇器可以繼承另一個選擇器的樣式。這有助於減少樣式重複，並保持程式碼的整潔性。SASS 使用 @extend 指令來實現繼承。

%button-base
  padding: 10px 15px
  background-color: #3498db
  color: white
  border: none
  border-radius: 5px

.button-primary
  @extend %button-base
  background-color: #1abc9c

.button-secondary
  @extend %button-base
  background-color: #f39c12

在這段程式碼中，我們定義了一個 %button-base 共享樣式，然後讓 .button-primary 和 .button-secondary 繼承這些樣式，並根據需要進行自定義修改。使用繼承的方式可以減少代碼重複，提高樣式的可維護性。

5. 條件語句（Conditionals）

SASS 支援條件語句，這讓我們可以根據某些條件選擇性地應用不同的樣式。這樣可以使樣式表更具動態性，根據不同情境調整顯示效果。

$theme: light

body
  @if $theme == light
    background-color: #fff
    color: #333
  @else
    background-color: #333
    color: #fff

這段程式碼中，根據變數 $theme 的值，條件地設定 body 的背景顏色和文字顏色。如果 $theme 為 light，則使用淺色背景和深色文字；否則，使用深色背景和淺色文字。

6. 循環（Loops）

SASS 還支援循環語句，這在需要根據某些條件自動生成多個樣式時非常有用。SASS 的循環可以遍歷一個列表，並生成對應的樣式。

$colors: red, green, blue

@each $color in $colors
  .#{$color}-box
    background-color: $color

在這段程式碼中，@each 循環將遍歷 $colors 列表，並為每個顏色生成一個相應的類別 .red-box、.green-box 和 .blue-box，並將其背景顏色設置為對應的顏色。

總結

SASS 的 SASS 語法是一種簡潔且強大的 CSS 編寫方式，通過簡單的縮排結構，讓開發者能夠更有效率地編寫和維護樣式。SASS 提供的變數、巢狀規則、混合、繼承等功能，能夠使樣式更加模組化、動態化，並大大減少冗餘代碼。學會 SASS 語法後，你可以更靈活地處理大型專案中的 CSS，提升工作效率。如果你還沒有開始使用 SASS，不妨從這些基礎語法開始，體驗它帶來的便利。

SCSS 介紹入門教學筆記 | 學習筆記

2023年7月2日 · 閱讀時間約 4 分鐘

kdchang

SASS（Syntactically Awesome Stylesheets）是一種 CSS 預處理器（CSS Preprocessor），它擴展了 CSS 的功能，使樣式表更具可讀性、模組化和可維護性。SASS 允許使用變數、巢狀（Nesting）、混入（Mixin）、繼承（Extend）等進階特性，讓開發者能更有效率地管理 CSS。

SASS 有兩種語法：

SCSS（Sassy CSS）：與傳統 CSS 語法相似，使用 {} 和 ; 來區分樣式，擴展性強且相容 CSS。
SASS（縮排語法）：省略 {} 和 ;，使用縮排來表示層級關係，簡潔但較不常用。

目前，SCSS 語法較受歡迎，因此本文主要以 SCSS 為主進行介紹。

二、SASS 的優勢

使用 SASS 的主要優勢包括：

可維護性：透過模組化的結構管理樣式，避免冗長且難以維護的 CSS。
變數（Variables）：可定義全站共用的變數，例如顏色、字體大小等，提高一致性。
巢狀結構（Nesting）：讓樣式更具層次感，避免重複選擇器。
混入（Mixin）：類似函式的概念，可重複使用樣式區塊，減少冗餘。
繼承（Extend）：透過 @extend 共享樣式，減少重複編寫的代碼。
函式（Functions）：內建函式如 lighten()、darken() 可動態調整顏色，提高設計靈活性。

三、安裝與使用 SASS

1. 透過 npm 安裝

如果使用 Node.js，可透過 npm 安裝 SASS：

npm install -g sass

安裝後，可使用以下指令將 SCSS 轉譯為 CSS：

sass input.scss output.css

可使用 --watch 讓 SASS 自動監聽檔案變化並即時編譯：

sass --watch input.scss:output.css

2. 透過 CDN 使用

雖然 SASS 本身無法直接在瀏覽器運行，但可透過一些線上工具（如 CodePen）編寫 SCSS，並自動編譯成 CSS 進行預覽。

四、SASS 基礎語法

1. 變數（Variables）

SASS 允許使用變數來存儲顏色、字體大小、間距等常數，使樣式更具一致性。

$primary-color: #3498db;
$font-size: 16px;

body {
    color: $primary-color;
    font-size: $font-size;
}

2. 巢狀結構（Nesting）

在 CSS 中，我們通常需要重複撰寫父選擇器，但在 SASS 中可直接巢狀編寫，提高可讀性。

nav {
    background: #333;
    ul {
        list-style: none;
        li {
            display: inline-block;
            a {
                color: white;
                text-decoration: none;
            }
        }
    }
}

這段 SCSS 會編譯成以下 CSS：

nav {
    background: #333;
}
nav ul {
    list-style: none;
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    color: white;
    text-decoration: none;
}

3. 混入（Mixin）

Mixin 可定義可重複使用的樣式區塊，並可接受參數，使樣式更加靈活。

@mixin button-style($bg-color) {
    background-color: $bg-color;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
}

.btn-primary {
    @include button-style(#3498db);
}

.btn-secondary {
    @include button-style(#2ecc71);
}

編譯後的 CSS 為：

.btn-primary {
    background-color: #3498db;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
}

.btn-secondary {
    background-color: #2ecc71;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
}

4. 繼承（Extend）

@extend 允許一個選擇器繼承另一個選擇器的樣式，避免重複撰寫代碼。

.message {
    padding: 10px;
    border-radius: 5px;
}

.success {
    @extend .message;
    background: #2ecc71;
}

.error {
    @extend .message;
    background: #e74c3c;
}

編譯後的 CSS：

.message, .success, .error {
    padding: 10px;
    border-radius: 5px;
}

.success {
    background: #2ecc71;
}

.error {
    background: #e74c3c;
}

5. 運算與函式

SASS 允許在樣式中進行運算，使數值調整更加靈活。

$base-size: 16px;

h1 {
    font-size: $base-size * 2;
}

h2 {
    font-size: $base-size * 1.5;
}

此外，SASS 內建許多函式，例如 darken()、lighten() 可用來調整顏色：

$primary-color: #3498db;

button {
    background: $primary-color;
    &:hover {
        background: darken($primary-color, 10%);
    }
}

編譯後的 CSS：

button {
    background: #3498db;
}
button:hover {
    background: #217dbb;
}

五、SASS 進階技巧

1. 分割檔案

SASS 允許將樣式拆分成多個檔案，並透過 @import 或 @use 來管理，提升可維護性。

// _variables.scss
$primary-color: #3498db;
$font-size: 16px;

// main.scss
@import 'variables';

body {
    color: $primary-color;
    font-size: $font-size;
}

2. 使用 `@use`

@use 是 @import 的改進版，能避免變數命名衝突，推薦使用：

@use 'variables' as v;

body {
    color: v.$primary-color;
    font-size: v.$font-size;
}

六、結論

SASS 是一種強大的 CSS 預處理器，它提供變數、巢狀、Mixin、繼承等功能，使樣式管理更加高效與模組化。透過 SASS，開發者可以撰寫更具結構性、可讀性和可維護性的 CSS。

對於前端開發者來說，掌握 SASS 不僅能提升開發效率，還能讓專案的樣式管理更加清晰。在實際專案中，建議將樣式模組化，並善用變數與 Mixin，以確保程式碼的可重用性與一致性。

LESS 入門教學筆記 | 學習筆記

2023年6月1日 · 閱讀時間約 4 分鐘

kdchang

前言

LESS（Leaner Style Sheets）是一種 CSS 預處理器，它在 CSS 的基礎上加入了變數、嵌套、混合（Mixins）、函式等功能，使樣式表的管理更加靈活且易於維護。LESS 文件最終會被編譯成標準的 CSS，並可在瀏覽器或 Node.js 環境中使用。

1. 安裝與使用

LESS 可以透過以下幾種方式使用：

1.1 透過 LESS.js 在瀏覽器中運行

這種方式適合開發環境，但不建議在正式環境中使用，因為它會在瀏覽器端進行編譯，影響效能。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LESS 測試</title>
    <link rel="stylesheet/less" type="text/css" href="styles.less">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/4.1.1/less.min.js"></script>
</head>
<body>
    <h1>Hello LESS!</h1>
</body>
</html>

1.2 透過 Node.js 編譯 LESS

如果你希望在開發環境中預先編譯 LESS，則可以使用 npm 安裝 LESS：

npm install -g less

然後使用以下指令將 .less 文件編譯為 .css：

lessc styles.less styles.css

這樣就能夠將 LESS 轉換為 CSS，並直接在 HTML 中引用 styles.css。

2. LESS 的基本語法

2.1 變數（Variables）

LESS 允許使用變數來儲存顏色、字型大小、間距等值，方便統一管理樣式。

@primary-color: #3498db;
@font-size: 16px;

body {
    color: @primary-color;
    font-size: @font-size;
}

2.2 嵌套（Nesting）

LESS 允許使用嵌套的方式來撰寫 CSS，這樣可以清楚地表示層級關係。

nav {
    background-color: #333;
    ul {
        list-style: none;
        li {
            display: inline-block;
            a {
                text-decoration: none;
                color: white;
            }
        }
    }
}

編譯後的 CSS：

nav {
    background-color: #333;
}
nav ul {
    list-style: none;
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    text-decoration: none;
    color: white;
}

2.3 混合（Mixins）

混合（Mixin）類似於函式，可以定義一組樣式，並在多個地方重複使用。

.border-radius(@radius) {
    border-radius: @radius;
}

.button {
    background-color: @primary-color;
    .border-radius(5px);
}

編譯後的 CSS：

.button {
    background-color: #3498db;
    border-radius: 5px;
}

2.4 運算（Operations）

LESS 支援數學運算，可以用來計算尺寸、顏色等。

@base-size: 10px;

.box {
    width: @base-size * 5;
    height: @base-size * 3;
    padding: @base-size + 5px;
}

編譯後的 CSS：

.box {
    width: 50px;
    height: 30px;
    padding: 15px;
}

2.5 繼承（Extend）

LESS 提供 extend 功能，允許一個選擇器繼承另一個選擇器的樣式。

.message {
    padding: 10px;
    border: 1px solid #ddd;
}

.success {
    &:extend(.message);
    background-color: #dff0d8;
}

編譯後的 CSS：

.message,
.success {
    padding: 10px;
    border: 1px solid #ddd;
}
.success {
    background-color: #dff0d8;
}

3. 進階功能

3.1 運用函式（Functions）

LESS 提供許多內建函式，例如 lighten()、darken()、fadeout() 等來調整顏色透明度、亮度等。

@main-color: #3498db;

.button {
    background-color: @main-color;
    border: 1px solid darken(@main-color, 10%);
    color: lighten(@main-color, 20%);
}

編譯後的 CSS：

.button {
    background-color: #3498db;
    border: 1px solid #217dbb;
    color: #5dade2;
}

3.2 迴圈（Loops）

LESS 允許使用 each() 來迭代陣列，或使用 for 來執行迴圈。

@colors: red, green, blue;

.each(@colors, {
    .box-@{value} {
        background-color: @value;
    }
});

編譯後的 CSS：

.box-red {
    background-color: red;
}
.box-green {
    background-color: green;
}
.box-blue {
    background-color: blue;
}

3.3 延遲運算（Lazy Evaluation）

LESS 變數的值在運算時才會解析，因此可以動態變更變數內容。

@theme-color: @primary-color;

.button {
    background-color: @theme-color;
}

這樣如果稍後更改 @primary-color，@theme-color 也會自動更新。

4. 結論

LESS 透過變數、嵌套、混合、運算等功能，大大提升了 CSS 的可維護性與開發效率。建議開發者透過 Node.js 進行 LESS 編譯，避免在瀏覽器端執行影響效能。透過 LESS，樣式表變得更具結構化，讓前端開發更為靈活高效。

安裝與設置

SASS 語法介紹

1. 變數（Variables）​

2. 巢狀規則（Nesting）​

3. 混合（Mixins）​

4. 繼承（Inheritance）​

5. 條件語句（Conditionals）​

6. 循環（Loops）​

總結

二、SASS 的優勢

三、安裝與使用 SASS

1. 透過 npm 安裝​

2. 透過 CDN 使用​

四、SASS 基礎語法

1. 變數（Variables）​

2. 巢狀結構（Nesting）​

3. 混入（Mixin）​

4. 繼承（Extend）​

5. 運算與函式​

五、SASS 進階技巧

1. 分割檔案​

2. 使用 @use​

六、結論

前言​

1. 安裝與使用​

1.1 透過 LESS.js 在瀏覽器中運行​

1.2 透過 Node.js 編譯 LESS​

2. LESS 的基本語法​

2.1 變數（Variables）​

2.2 嵌套（Nesting）​

2.3 混合（Mixins）​

2.4 運算（Operations）​

2.5 繼承（Extend）​

3. 進階功能​

3.1 運用函式（Functions）​

3.2 迴圈（Loops）​

3.3 延遲運算（Lazy Evaluation）​

4. 結論​

1. 變數（Variables）

2. 巢狀規則（Nesting）

3. 混合（Mixins）

4. 繼承（Inheritance）

5. 條件語句（Conditionals）

6. 循環（Loops）

1. 透過 npm 安裝

2. 透過 CDN 使用

1. 變數（Variables）

2. 巢狀結構（Nesting）

3. 混入（Mixin）

4. 繼承（Extend）

5. 運算與函式

1. 分割檔案

2. 使用 `@use`

前言

1. 安裝與使用

1.1 透過 LESS.js 在瀏覽器中運行

1.2 透過 Node.js 編譯 LESS

2. LESS 的基本語法

2.1 變數（Variables）

2.2 嵌套（Nesting）

2.3 混合（Mixins）

2.4 運算（Operations）

2.5 繼承（Extend）

3. 進階功能

3.1 運用函式（Functions）

3.2 迴圈（Loops）

3.3 延遲運算（Lazy Evaluation）

4. 結論