SCSS基本使用

SCSS（Sassy CSS）是一种 CSS 预处理器，它是 CSS 语言的一个扩展，增加了变量、嵌套规则、混合（mixins）、函数等功能，使得编写 CSS 更加高效和易于维护。SCSS 代码最终会被编译成标准的 CSS 代码。

SCSS 的基本语法：

变量：在 SCSS 中，你可以使用美元符号定义变量。

$primary-color: #3498db;
$padding: 15px;.container {color: $primary-color;padding: $padding;
}

嵌套规则：SCSS 允许你嵌套规则，使得结构更加清晰。

nav {ul {margin: 0;padding: 0;list-style: none;li {display: inline;}}
}

混合（Mixins）：类似于函数，可以包含一组可重用的样式声明。

@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius;
}.box { @include border-radius(10px); }

函数：SCSS 允许你创建自己的函数。

@function multiply($number, $multiplier) {@return $number * $multiplier;
}.container {width: multiply(5, 2);
}

继承：可以在一个规则集内继承另一个规则集。

.base-styles {font-size: 18px;font-weight: bold;
}.important-text {@extend .base-styles;color: red;
}

操作符：SCSS 支持加、减、乘、除等操作符。
```
.container {width: 100%;max-width: 1200px / 2;
}
```
条件语句和循环：SCSS 支持 @if、@for、@each 和 @while 等控制指令。
```
@for $i from 1 through 3 {.item-#{$i} { width: 100% / 3; }
}
```
注释：SCSS 支持两种类型的注释。
- 单行注释：// 这是一个注释
- 多行注释：/* 这是一个多行注释 */

SCSS 的基本使用步骤：

安装编译器：你需要一个 SCSS 编译器，如 node-sass，可以通过 npm 安装。
```
npm install -g node-sass
```
编写 SCSS 文件：创建一个 .scss 文件，并使用 SCSS 语法编写样式。
编译 SCSS 文件：使用编译器将 SCSS 文件编译成 CSS 文件。
```
node-sass input.scss output.css
```
链接 CSS 文件：在 HTML 文件中链接编译后的 CSS 文件。
```
<link rel="stylesheet" href="output.css">
```
自动化编译：可以使用如 gulp 或 webpack 等工具自动编译 SCSS 文件。