预处理器scss用法

### 使用 SCSS 预处理器语法和基本用法

#### 变量定义与使用
SCSS 支持变量的定义，这可以提高样式的可维护性。通过 `$` 符号来声明变量，在整个样式表中都可以重复利用这些已定义的颜色、字体大小或其他属性。

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

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

#### 嵌套规则
为了使代码结构更加清晰直观，SCSS 提供了嵌套的选择器写法，子元素、伪类甚至媒体查询都支持这种形式[^2]。

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

#### 混合宏（Mixins）
当有多个地方需要用到相同的样式组合时，可以通过 `@mixin` 来创建自定义片段，并通过 `@include` 调用来简化书写过程[^4]。

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

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

#### 继承选择器
借助 `%placeholder` 占位符配合 `@extend` 关键字实现样式的继承关系，减少冗余代码的同时保持良好的逻辑关联[^3]。

%sale-button {
  background-color: red;
  &:hover { opacity: .8; }
}

.button-sale {
  @extend %sale-button;
  border: double 5px transparent;
  border-radius: 7px;
  color: white;
}

#### 导入外部文件
对于大型项目而言，合理拆分并按需加载不同的模块化样式片是非常重要的。SCSS 中可以直接引入其他 `.scss` 文件的内容而不必担心多余标签的存在。

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

// main.scss
@import 'reset';
...

#### 控制指令与其他高级特性
除了上述提到的基础功能外，SCSS 还提供了诸如条件判断(`if`, `for`)、循环迭代(@each,@while)，甚至是数学计算能力等强大工具帮助构建复杂而灵活的设计方案。