Sass语法全览：规则与实践示例

"本文档详述了Sass的全部语法及写法，并提供了一系列的实践案例，帮助读者理解和掌握这门强大的CSS预处理器语言。" Sass（Syntactically Awesome Style Sheets）是一种CSS扩展语言，它引入了变量、嵌套规则、混合（mixin）、函数等特性，使CSS编写更简洁、易于维护。以下是一些关键的Sass语法和写法： 1. 嵌套选择器（Nested Selectors）： 在示例中，`a`选择器的`&`符号用于表示其父选择器。这使得嵌套的CSS规则更易读。例如： ```scss a { font-weight: bold; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } } ``` 编译后将转换为： ```css a { font-weight: bold; } a:hover { text-decoration: underline; } body.firefox a { font-weight: normal; } ``` 2. ID和类选择器的缩写： 如`#main`与`#main-sidebar`的写法可以更简洁地表示为： ```scss #main { color: black; &-sidebar { border: 1px solid; } } ``` 编译后的CSS是： ```css #main { color: black; } #main-sidebar { border: 1px solid; } ``` 3. 属性简写（Property Shorthand）： 在Sass中，你可以将多行的属性值合并为一行。例如： ```scss .funky { font: { family: fantasy; size: 30em; weight: bold; } } ``` 将会被编译成： ```css .funky { font-family: fantasy; font-size: 30em; font-weight: bold; } ``` 4. 属性值内嵌套（Nested Property Values）： 另一种简化写法是在属性值内部嵌套，如： ```scss .funky { font: 20px/24px fantasy { weight: bold; } } ``` 这同样会被转换为： ```css .funky { font: 20px/24px fantasy; font-weight: bold; } ``` 5. 变量（Variables）： Sass允许定义变量，以 `$` 开头。如： ```scss $width: 5em; #main { width: $width; } ``` 结果是： ```css #main { width: 5em; } ``` 6. 混合（Mixins）： 混合可以创建可重用的代码块。定义一个名为`firefox-message`的混合： ```scss @mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @include firefox-message(".header"); ``` 编译后为： ```css body.firefox.header:before { content: "Hi, Firefox users!"; } ``` 7. 函数（Functions）： Sass还支持自定义函数，例如在变量中使用函数计算值： ```scss $font-size: 12px; $line-height: 30px; p { font: #{$font-size}/#{$line-height}; } ``` 生成的CSS将是： ```css p { font: 12px/30px; } ``` 通过学习和实践这些Sass语法和写法，开发者可以编写出更加结构化、可维护的CSS代码，提高工作效率。