Sass快速入门：安装与使用、编译选项、变量

"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开发的效率和代码质量。