Sass语法基础：变量、注释与作用域详解

本资源是一份关于Sass语法学习的笔记，Sass是CSS预处理器，它在标准CSS的基础上引入了更多的编程特性，使得样式编写更加灵活和高效。以下是笔记中的关键知识点： 1. **SassScript功能**: SassScript是Sass提供的新功能，它扩展了CSS的表达能力，允许在属性中使用变量、算数运算等。这些特性使得样式代码能够复用和动态调整，提升了代码的可维护性。 2. **注释** - Sass支持CSS的多行注释`/**/`和单行注释`//`，其中多行注释在编译后会完整保留或压缩输出，单行注释仅在开发模式下保留。 - 使用`!`作为多行注释的首字符，即使在压缩模式下也会保留该注释。 - 插值语句允许将变量值嵌入到注释中。 3. **变量管理** - 变量的定义使用美元符号 `$`，赋值方式与CSS属性相似，如 `$width: 1600px;` 和 `$pen-size: 3em;`。 - 变量可以直接在CSS选择器中使用，如 `#app { height: $width; font-size: $pen-size; }`。 - 变量具有作用域，嵌套规则内的变量为局部，而不在嵌套内的变量则是全局的。若需使局部变量成为全局，可以在定义时添加`!global`声明，如 `#foo { $width: 5em !global; width:`。 4. **块级作用域与变量** - 在Sass中，变量的作用域遵循CSS选择器的嵌套规则，嵌套规则内的局部变量只在其范围内有效，而全局变量则在整个文档中可用。 通过学习这份笔记，开发者可以更好地理解和掌握Sass的变量管理和控制注释的方式，提高CSS编写效率和代码组织的清晰度。无论是开发模式还是压缩模式，Sass的灵活性和易用性都为前端开发提供了强大的工具支持。