scss一、SCSS 基础定义 SCSS（Sassy CSS）是 Sass 的现代语法（2006年推出），是 CSS

一、SCSS 基础定义

SCSS（Sassy CSS） 是 Sass 的现代语法（2006年推出），是 CSS 的扩展语言，提供嵌套、变量、混合器 等功能，最终编译为标准 CSS。
与 Sass 的区别：

SCSS 使用 {} 和 ;（与 CSS 语法兼容）；
Sass 使用缩进（旧语法，已逐渐被 SCSS 取代）。

二、核心特性详解

1. 嵌套（Nesting）

作用：简化选择器层级，提高代码可读性。

示例：

.nav {
  ul {
    margin: 0;
    li {
      list-style: none;
      a {
        color: blue;
        &:hover { text-decoration: underline; } // & 表示父选择器
      }
    }
  }
}

编译后：

.nav ul { margin: 0; }
.nav ul li { list-style: none; }
.nav ul li a { color: blue; }
.nav ul li a:hover { text-decoration: underline; }

2. 变量（Variables）

语法：$变量名: 值;
应用场景：统一管理颜色、字体、间距等。

示例：

$primary-color: #3498db;
$base-font-size: 16px;

.button {
  color: $primary-color;
  font-size: $base-font-size;
}

3. 混合器（Mixins）

作用：复用样式片段，支持参数传递。

示例：

@mixin border-radius($radius: 4px) { // 默认值
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

.card {
  @include border-radius(8px); // 引用混合器
}

4. 继承（Extend）

作用：共享多个选择器的样式。

示例：

.btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
}

.btn-primary {
  @extend .btn;
  background-color: $primary-color;
}

5. 导入（Import）

作用：拆分代码为多个文件，通过 @use 或 @import 引入。

示例：

// base.scss
$primary-color: #3498db;

// main.scss
@use 'base'; // 引入变量（需使用 base.$primary-color 访问）

6. 函数（Functions）

作用：自定义计算逻辑，返回值。

示例：

@function calculate-width($cols, $total: 12) {
  return ($cols / $total) * 100%;
}

.col-6 {
  width: calculate-width(6); // 50%
}

三、问题

1. 问：SCSS 与 CSS 的主要区别？

答：
- SCSS：
  - 支持嵌套、变量、混合器等动态特性；
  - 需要编译为 CSS 才能在浏览器中使用；
  - 代码更易维护和复用（如通过变量统一管理颜色）。
- CSS：
  - 原生语法，无需编译；
  - 不支持动态特性，选择器层级深时可读性差。

2. 问：@use 和 @import 的区别？

答：
- @import（SCSS 旧语法）：
  - 全局导入，所有变量和混合器直接暴露；
  - 可能导致命名冲突。
- @use（SCSS 新语法，推荐）：
  - 模块化导入，需通过命名空间访问（如 base.$color）；
  - 仅执行一次，避免重复导入；
  - 支持配置（如 @use 'base' with ($primary-color: red)）。

3. 问：如何优化 SCSS 编译性能？

答：
- 使用 @use 替代 @import（减少重复编译）；
- 拆分文件为功能模块（如 _variables.scss、_mixins.scss）；
- 使用 @forward 组合模块（如 @forward 'utils' as utils-*）；
- 生产环境开启压缩（如 style: compressed）。

4. 问：SCSS 与 CSS Modules 的对比？

答：

维度	SCSS	CSS Modules
作用	增强 CSS 语法（嵌套、变量）	局部作用域（自动生成唯一类名）
作用域	全局（需手动避免命名冲突）	局部（默认所有类名唯一）
兼容性	需编译为 CSS	需配合构建工具（如 Webpack）
组合使用	可与 CSS Modules 结合	纯 CSS 语法，不支持 SCSS 特性

四、最佳实践与性能优化

项目结构设计

styles/
├── base/
│   ├── _reset.scss      # 重置样式
│   └── _typography.scss # 字体样式
├── components/
│   ├── _button.scss     # 按钮组件
│   └── _card.scss       # 卡片组件
├── utils/
│   ├── _variables.scss  # 变量
│   └── _mixins.scss     # 混合器
└── main.scss            # 主入口

性能优化技巧

避免深度嵌套（建议不超过 3 层）：

// 不好的写法
.page {
  .sidebar {
    .menu {
      .item { /* ... */ }
    }
  }
}

// 推荐写法
.page-sidebar {}
.sidebar-menu {}
.menu-item {}

使用占位符选择器（%）：

%hidden {
  display: none;
}

.modal-backdrop {
  @extend %hidden;
}

与现代工具集成
- Webpack：使用 sass-loader 编译 SCSS；
- PostCSS：结合 autoprefixer 自动添加浏览器前缀；
- Tailwind CSS：通过 @layer 与 SCSS 混合使用：
```
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}
```