深入了解 Sass 和 SCSS：CSS 预处理器的强大功能

1. 变量

Sass 允许通过 $ 符号来定义变量，存储需要复用的信息，例如颜色、字体等。变量让样式的复用性增强，同时提升了代码的可维护性。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2. 嵌套

Sass 支持嵌套 CSS 规则，这种方式让代码结构更清晰。不过，建议谨慎使用嵌套，过度嵌套会导致生成的 CSS 难以维护。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

3. 引入（Import）

Sass 的 @import 指令允许将样式代码分割成多个文件，并在需要时引入。与原生 CSS 的 @import 不同，Sass 的导入不会增加 HTTP 请求，而是直接将引入的样式合并到最终的 CSS 文件中。

// _reset.scss
html, body, ul, ol {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

4. 混合（Mixin）

Mixin 用来定义可复用的 CSS 代码块，并允许传递参数来生成灵活的样式，特别适合处理浏览器兼容性问题。

@mixin border-radius($radius) {
  border-radius: $radius;
  -ms-border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

5. 继承（Extend）

Sass 的 @extend 指令允许一个选择器继承另一个选择器的样式，从而减少代码冗余。

%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-common;
}

.success {
  @extend %message-common;
  border-color: green;
}

.error {
  @extend %message-common;
  border-color: red;
}

6. 操作符

Sass 支持标准的算术运算符，使得样式中的数值计算更加简洁直观。

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

7. 引用父级选择器（&）

& 用来引用父级选择器，常用于嵌套规则中，生成伪类和复合选择器等。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

8. 嵌套属性

在 Sass 中，属性可以嵌套在同一个命名空间下，减少重复书写。

.demo {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

总结：

Sass 和 SCSS 提供了强大的功能来优化 CSS 的编写方式，如变量、嵌套、Mixin、继承等。这些特性极大地增强了代码的可读性、复用性和维护性，使得复杂的样式管理变得更加高效。在实际开发中，合理使用这些特性，可以帮助开发者编写更加简洁、可扩展的样式表。