"Sass学习笔记"
Sass是一种强大的CSS预处理器，它允许开发者使用变量、嵌套规则、混合、函数等特性编写更简洁、模块化的CSS代码。在本笔记中，我们将探讨Sass的安装、使用方法以及变量的使用。
### 1. 安装Sass
安装Sass可以通过npm（Node.js包管理器）进行，只需在终端运行以下命令：
```npm
npm install -g sass
```
这将全局安装Sass，使得在任何目录下都能使用Sass命令。
### 2. 编译Sass
#### 2.1. 基本编译
要编译一个Sass文件，如`style.scss`，可以运行：
```bash
$sass style.scss
```
这将生成一个与源文件同名的CSS文件，位于同一目录下。
#### 2.2. 编译为指定CSS文件
如果需要将Sass文件编译为特定的CSS文件，例如`style.css`，使用如下命令：
```bash
$sass style.scss style.css
```
#### 2.3. 自动编译
为了在Sass文件更改时自动编译，可以使用`--watch`选项：
```bash
$sass --watch style.scss:style.css
```
这会监控`style.scss`文件，当其变动时自动更新`style.css`。
### 3. 编译输出CSS的格式
Sass提供四种编译样式：
- **嵌套（默认）**：保持源代码的嵌套结构。
- **紧凑（compact）**：去除不必要的缩进，但仍保留每行一个规则。
- **扩展（expanded）**：展开嵌套规则，每条规则独占一行。
- **压缩（compressed）**：去除所有不必要的空白和换行，最小化文件大小。
例如，要将Sass文件以压缩格式输出，命令如下：
```bash
$sass input.scss output.css --style compressed
```
### 4. Sass变量
Sass变量是CSS预处理的核心特性之一，用于存储可复用的信息，如颜色、尺寸、布尔值等。变量以`$`开头，如：
```sass
$font-size: 15px;
$primary-color: #333;
```
#### 4.1. 变量作用域
Sass变量遵循CSS的层级作用域原则。在一个规则集中定义的变量只在该集内有效。全局变量可通过`!global`关键字设定：
```sass
$color: blue;
div {
$color: red !global;
}
```
在此例中，`div`内的`$color`变量是全局的，会覆盖外部的`$color`。
#### 4.2. 默认变量值
通常，多次声明同一个变量会导致最后的声明生效。但通过使用`!default`标志，你可以为库文件提供可覆盖的默认值：
```sass
$font-size: 16px !default;
```
这样，如果其他地方已经定义了`$font-size`，则不会被此默认值覆盖。
Sass的这些特性极大地提升了CSS的可维护性和组织性，让开发者能够更高效地管理样式代码。通过熟练掌握Sass，可以提升CSS开发的效率和代码质量。
我的内容管理
展开
