CSS 预处理器 Sass 入门

原生 CSS 缺少变量、函数等编程能力，大型项目维护困难。Sass（SCSS）作为 CSS 预处理器，给 CSS 加上了这些能力。

一、安装与编译

npm install -g sass
sass input.scss output.css     # 编译
sass --watch input.scss:output.css   # 监听自动编译

二、变量

$primary: #3498db;
$radius: 8px;

.button {
  background: $primary;
  border-radius: $radius;
}

三、嵌套

.nav {
  padding: 16px;
  ul { margin: 0; }
  li {
    display: inline;
    a { color: #333; }
  }
}

嵌套让 CSS 结构与 HTML 层级一致，可读性好。但别嵌套太深（建议不超过 3 层），否则生成的选择器过长、优先级混乱。

四、父选择器 &

.button {
  color: blue;
  &:hover { color: darkblue; }     /* .button:hover */
  &--large { padding: 20px; }       /* .button--large */
}

五、混入（Mixin）

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  @include flex-center;
}

六、继承

.button {
  padding: 8px 16px;
  border: none;
}
.primary-button {
  @extend .button;        /* 继承所有样式 */
  background: blue;
}

七、模块化

// _variables.scss
$colors: (...);

// main.scss
@use 'variables';       // 引入
body { color: variables.$colors; }

八、Partials 与组织

用下划线开头的文件（_xxx.scss）表示部分文件，不会被单独编译，供其他文件 @use 引入。便于把样式拆分组织。

九、小结

Sass 让 CSS 有了工程化能力。虽然现代 CSS 也在吸收变量等特性（CSS Custom Properties），但 Sass 的混入、继承、循环仍是强大补充。