SCSS 基本使用详解

一、引言

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'})]
};