一、引言
SCSS 是 Sass（Syntactically Awesome Stylesheets）的其中一種語法，是一種預處理器腳本語言，能夠擴展 CSS 的功能，使其更加強大和高效。SCSS 保留了 CSS 的原有語法，同時增加了變量、嵌套規則、混合宏（mixin）、繼承等高級功能。本文將詳細介紹 SCSS 的基本使用方法，幫助讀者快速上手并掌握 SCSS 的核心概念和技巧。
二、SCSS 安裝與環境配置
1. 安裝 Node.js 和 npm
在使用 SCSS 之前，需要先安裝 Node.js 和 npm（Node Package Manager）。可以從 Node.js 官方網站下載并安裝 Node.js，安裝完成后，npm 會自動安裝。
2. 安裝 Sass
使用 npm 安裝 Sass：
npm install -g sass
安裝完成后，可以使用 sass --version 命令檢查安裝是否成功。
3. SCSS 文件編譯
將 SCSS 文件編譯為 CSS 文件，可以使用以下命令：
sass input.scss output.css
或者使用監視模式，使得 SCSS 文件在每次保存時自動編譯：
sass --watch input.scss:output.css
三、SCSS 語法與基本用法
1. 變量
SCSS 允許使用變量來存儲值，如顏色、字體大小、邊距等。變量使用 $ 符號定義。
// 變量定義
$primary-color: #3498db;
$font-size: 16px;// 使用變量
body {color: $primary-color;font-size: $font-size;
}
2. 嵌套規則
SCSS 允許在選擇器內部嵌套其他選擇器，這樣可以更清晰地表示層級關系，減少代碼冗余。
// 嵌套規則
nav {ul {margin: 0;padding: 0;list-style: none;li {display: inline-block;a {text-decoration: none;color: $primary-color;&:hover {color: darken($primary-color, 10%);}}}}
}
3. 混合宏（Mixin）
Mixin 是 SCSS 中的一種復用機制，可以將一組樣式定義在一個 Mixin 中，然后在其他地方進行調用。
// 定義 Mixin
@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;
}// 使用 Mixin
.box {@include border-radius(10px);background-color: $primary-color;
}
4. 繼承
SCSS 允許一個選擇器繼承另一個選擇器的樣式，這樣可以避免重復代碼，提高代碼的復用性。
// 定義基類
.message {padding: 10px;border: 1px solid #ccc;border-radius: 3px;
}// 繼承基類
.success {@extend .message;background-color: #e0ffd8;
}.error {@extend .message;background-color: #ffd8d8;
}
5. 運算
SCSS 支持數學運算，可以對數字、顏色、字符串等進行計算。
$base-font-size: 16px;
$spacing-unit: 10px;.container {font-size: $base-font-size;margin: $spacing-unit * 2;padding: $spacing-unit + 5px;width: 100% - 2 * $spacing-unit;
}
6. 插值
插值允許將變量或表達式的結果插入到選擇器名稱、屬性名稱或屬性值中。
$size: large;.icon-#{$size} {font-size: 32px;
}$property: width;.container {#{$property}: 100%;
}
四、SCSS 進階用法
1. 部件化與模塊化
將樣式拆分為多個獨立的文件，使得代碼更加模塊化和可維護。可以使用 @import 語句引入其他 SCSS 文件。
// base.scss
$primary-color: #3498db;
$font-size: 16px;body {color: $primary-color;font-size: $font-size;
}// layout.scss
.container {width: 80%;margin: 0 auto;
}// main.scss
@import 'base';
@import 'layout';
2. 條件與循環
SCSS 支持條件語句和循環，可以用來編寫更加動態和靈活的樣式。
// 條件語句
@mixin responsive($device) {@if $device == phone {@media (max-width: 600px) { @content; }} @else if $device == tablet {@media (max-width: 900px) { @content; }} @else {@content;}
}.container {@include responsive(phone) {width: 100%;}@include responsive(tablet) {width: 80%;}@include responsive(desktop) {width: 60%;}
}// 循環語句
@for $i from 1 through 5 {.col-#{$i} {width: 20% * $i;}
}$list: a, b, c, d, e;@each $item in $list {.item-#{$item} {content: '#{$item}';}
}
3. 函數
SCSS 允許定義自定義函數，可以在樣式表中進行復雜的運算和邏輯處理。
// 自定義函數
@function calculate-rem($px) {@return $px / 16px * 1rem;
}body {font-size: calculate-rem(16px);
}
五、SCSS 工具與編譯
1. 使用命令行工具
前文已經介紹了使用 sass 命令行工具編譯 SCSS 文件，此外還可以使用以下方式：
sass --watch input.scss:output.css
2. 使用任務運行器
可以使用 Gulp、Grunt 等任務運行器來自動化編譯 SCSS 文件。
// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));gulp.task('sass', function() {return gulp.src('./src/scss/**/*.scss').pipe(sass().on('error', sass.logError)).pipe(gulp.dest('./dist/css'));
});gulp.task('watch', function() {gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));
});
3. 使用構建工具
現代前端開發中，通常使用 Webpack 等構建工具來管理和編譯 SCSS 文件。
// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {module: {rules: [{test: /\.scss$/,use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader']}]},plugins: [new MiniCssExtractPlugin({filename: '[name].css'})]
};
六、總結
SCSS 作為 CSS 的預處理器，為開發者提供了更強大的功能和靈活性。通過變量、嵌套、混合宏、繼承等特性，SCSS 大大簡化了樣式表的編寫和維護工作。本文詳細介紹了 SCSS 的基本語法和使用方法，并提供了一些進階技巧和工具，幫助讀者更好地掌握和應用 SCSS。
掌握 SCSS 不僅可以提高開發效率，還能使代碼更加清晰和可維護。希望本文能幫助讀者快速入門 SCSS，并在實際項目中充分發揮其優勢。
