React Sass

页面一复杂，CSS 就容易重复堆叠：同一种蓝色到处写、选择器越套越深、改一处漏三处。Sass 是 CSS 的「升级版」，提供变量、嵌套、混入等编程能力，让样式像代码一样可维护。本节看在 React 项目中怎么使用它。

安装与使用

Vite 脚手架下只需安装一个 sass 包即可直接使用，无需额外配置。

npm install -D sass

把样式文件后缀改成 .scss，再像普通 CSS 一样引入：

// App.jsx
import './App.scss';

export default function App() {
  return (
    <div className="app">
      <button className="btn">主要按钮</button>
    </div>
  );
}

变量与嵌套

用 $ 定义变量统一存颜色、圆角等常量；子选择器写进父选择器内部，层级一目了然。

$primary: #2f7cf6; // 颜色变量
$radius: 6px;      // 圆角变量

.app {
  padding: 20px;

  .btn {
    background: $primary;
    border-radius: $radius;

    &:hover { // & 指代外层选择器 .btn
      opacity: 0.8;
    }
  }
}

编译结果等价于手写的 .app .btn 与 .app .btn:hover，但源码要清晰得多。

混入 @mixin 复用整段样式

一段样式在多处重复时抽成混入，用 @include 引入，还可以传参数控制细节。

@mixin flex-center($gap: 8px) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $gap;
}

.header {
  @include flex-center(); // 用默认间距 8px
  height: 60px;
}

.footer {
  @include flex-center(16px); // 覆盖为 16px
  padding: 12px 0;
}

与 CSS Modules 组合

.scss 同样可以做成模块，做到「样式能力 + 组件隔离」两手抓，是中型项目里很常见的搭配。

// Header.jsx
import styles from './Header.module.scss';

export default function Header() {
  return <header className={styles.bar}>博客标题</header>;
}

/* Header.module.scss */
.bar { background: #111; color: #fff; padding: 12px 20px; }

小结

Sass 用变量、嵌套、& 和 @mixin 把重复的 CSS 变成可复用的「代码」；React 项目里只需安装 sass，把样式写成 .scss 再 import 即可，加上 module 后缀还能获得组件级样式隔离。