css预处理器

/* 使用 SASS (SCSS 语法) 的示例 */

// 变量
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

// 嵌套
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { 
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: $primary-color;
    font-family: $font-stack;
  }
}

// 混合宏 (mixin)
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

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

// 继承
.error {
  border: 1px solid red;
  background-color: #fdd;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

解释说明：

1. 变量：SASS 允许使用变量来存储颜色、字体等常用值，方便维护和修改。例如 $primary-color 和 $font-stack。
2. 嵌套：SASS 支持 CSS 规则的嵌套，使代码结构更加清晰，减少了重复书写父选择器的情况。
3. 混合宏 (mixin)：通过 @mixin 定义可复用的样式块，并通过 @include 引用，简化了浏览器兼容性处理。
4. 继承：使用 @extend 可以让一个选择器继承另一个选择器的样式，减少重复代码。

以上是使用 SASS 预处理器的简单示例，展示了其主要功能和优势。