SASS的基礎知識
本文介紹SASS的基礎知識。
我們將一步步講解SASS的基本功能，並通過實用範例程式碼演示如何使用。
YouTube Video
SASS的基礎知識
SASS（Syntactically Awesome Stylesheets）是一種擴展CSS的樣式表語言。透過使用 SASS，你可以利用 CSS 沒有的進階功能，例如變數、巢狀結構、混入（mixins）以及繼承等功能。這讓樣式表的管理與重複使用變得更容易。
什麼是SASS？
SASS是一種簡化CSS編寫並實現更靈活且強大樣式設計的語言。SASS 也提供了SCSS（Sassy CSS）語法，這與標準CSS語法相似。以下是一個範例：。
SCSS 範例
1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5 font-family: $base-font;
6 background-color: $bg-color;
7}CSS 範例
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f4;
4}SASS環境設置
安裝方式
要使用SASS，請先安裝Node.js，然後使用以下指令安裝SASS：。
1npm install -g sass編譯方法
要將SASS檔案（.scss 或 .sass）編譯成 CSS，請使用以下指令：。
1sass input.scss output.css你也可以使用 watch 選項來監控檔案變更並即時編譯。
變數
SASS允許您使用變數來重複利用顏色與字體大小等數值。
範例代碼
1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5 color: $primary-color;
6 font-family: $font-stack;
7}- 這段程式碼利用 SASS 變數來定義顏色與字體，並在
body選擇器中加以重複使用，以提升一致性與可維護性。
編譯結果
1body {
2 color: #3498db;
3 font-family: 'Roboto', sans-serif;
4}巢狀結構
SASS允許CSS選擇器巢狀，提升了程式碼的可讀性。
範例代碼
1nav {
2 ul {
3 list-style: none;
4 margin: 0;
5 padding: 0;
6
7 li {
8 display: inline-block;
9
10 a {
11 text-decoration: none;
12 color: #333;
13
14 &:hover {
15 color: #3498db;
16 }
17 }
18 }
19 }
20}- 這段程式碼利用巢狀階層來直觀地呈現樣式結構。
編譯結果
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5}
6
7nav ul li {
8 display: inline-block;
9}
10
11nav ul li a {
12 text-decoration: none;
13 color: #333;
14}
15
16nav ul li a:hover {
17 color: #3498db;
18}混合（Mixins）
混合（Mixins）讓您可以在多個選擇器之間重用程式碼。
範例代碼
1@mixin border-radius($radius) {
2 border-radius: $radius;
3 -webkit-border-radius: $radius;
4 -moz-border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}
10
11.card {
12 @include border-radius(5px);
13}- 這段程式碼透過
@mixin定義了border-radius樣式，並在button和.card裡用@include重複使用，實現高效且無需重複的樣式設計。
編譯結果
1button {
2 border-radius: 10px;
3 -webkit-border-radius: 10px;
4 -moz-border-radius: 10px;
5}
6
7.card {
8 border-radius: 5px;
9 -webkit-border-radius: 5px;
10 -moz-border-radius: 5px;
11}繼承（@extend）
繼承允許您將現有樣式套用到其他選擇器。
範例代碼
1%button-style {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 @extend %button-style;
9 border: none;
10}
11
12.link-button {
13 @extend %button-style;
14 text-decoration: none;
15}- 這段程式碼定義了一個佔位選擇器
%button-style，並透過@extend把共同樣式套用在button和.link-button上，促進重用與一致性。
編譯結果
1button, .link-button {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 border: none;
9}
10
11.link-button {
12 text-decoration: none;
13}條件判斷與迴圈
SASS支援條件判斷與迴圈，可動態生成樣式。
條件語句範例
1$theme: dark;
2
3body {
4 background-color: if($theme == light, #fff, #333);
5 color: if($theme == light, #333, #fff);
6}- 這段程式碼利用 SASS 的
if函式，根據$theme的值切換背景和文字顏色，實現動態樣式產生。
迴圈範例
1@for $i from 1 through 3 {
2 .column-#{$i} {
3 width: calc(100% / $i);
4 }
5}- 這段程式碼利用 SASS 的
@for迴圈動態生成.column-1到.column-3的類別。
編譯結果
1body {
2 background-color: #333;
3 color: #fff;
4}
5
6.column-1 {
7 width: 100%;
8}
9
10.column-2 {
11 width: 50%;
12}
13
14.column-3 {
15 width: 33.3333%;
16}檔案拆分與導入
SASS可通過@use或@import進行檔案拆分與重用。
檔案結構
styles/
_variables.scss
_mixins.scss
main.scss_variables.scss
1$primary-color: #3498db;_mixins.scss
1@mixin flex-center {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}main.scss
1@use 'variables';
2@use 'mixins';
3
4header {
5 background-color: variables.$primary-color;
6 @include mixins.flex-center;
7}編譯結果
1header {
2 background-color: #3498db;
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}總結
使用SASS可以簡化CSS編寫流程，提升程式碼的重用性與維護性。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。