SASS使用规范

在使用 SCSS 时，遵循一些最佳实践和规范可以帮助你保持代码的整洁、可维护性和可扩展性。

以下是一些常见的 SCSS 使用规范，适用于大多数项目：

1. 文件结构规范

SCSS 文件的结构应该清晰，以便于组织和维护。常见的文件结构如下：

scss/
├── base/
│   ├── _reset.scss        # 重置样式
│   ├── _typography.scss   # 字体和排版样式
│   └── _variables.scss    # 全局变量
├── components/
│   ├── _buttons.scss      # 按钮样式
│   └── _cards.scss        # 卡片样式
├── layout/
│   ├── _header.scss       # 页头样式
│   ├── _footer.scss       # 页脚样式
│   └── _grid.scss         # 栅格系统
├── pages/
│   ├── _home.scss         # 首页样式
│   └── _about.scss        # 关于页面样式
├── themes/
│   └── _theme.scss        # 主题样式
└── main.scss              # 主入口文件，导入所有其他文件

• base/ 文件夹包含重置、排版、变量等全局样式。

• components/ 包含可复用的 UI 组件样式。

• layout/ 包含布局样式，如页头、页脚、栅格等。

• pages/ 包含特定页面的样式。

• themes/ 包含主题样式，允许切换主题时修改变量。

• main.scss 是主入口文件，导入所有其他的 SCSS 文件。

2. 使用变量

使用变量可以提高可维护性和一致性。通常将所有的变量定义在 _variables.scss 中，并且遵循一致的命名规范。

// _variables.scss
$primary-color: #3498db;
$font-family: Arial, sans-serif;
$font-size-base: 16px;

命名规范：

• 使用 kebab-case（短横线连接的小写字母）来命名变量：如 $primary-color。

• 为避免命名冲突，可以使用命名空间，如：$theme-primary-color。

3. 嵌套的合理使用

SCSS 支持嵌套，但嵌套不应过多，避免深层嵌套导致代码难以维护。一般来说，嵌套层级不应超过 3 层。

// 好的做法
.card {
  padding: 20px;
  .card-header {
    font-size: 1.5rem;
  }
}

// 不推荐：过多的嵌套会影响可维护性
.card {
  padding: 20px;
  .card-header {
    .title {
      font-size: 1.5rem;
    }
  }
}

4. 使用混入（Mixins）

混入可以复用样式，并接受参数。它们是避免重复代码的有效工具。

// _mixins.scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

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

5. 使用占位符（Placeholders）

占位符 (%) 用于继承，避免代码重复。它们不像类一样编译成 CSS，只有在被继承时才会被生成。

// _mixins.scss
%button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

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

.secondary-button {
  @extend %button;
  background-color: gray;
}

6. 使用 BEM（块元素修饰符）命名约定

BEM（块元素修饰符）是一种 CSS 类名命名约定，能提高代码的可读性和可维护性。即使使用 SCSS，也推荐使用 BEM 规范来命名类。

// BEM 规范
.button {
  padding: 10px 20px;
  background-color: $primary-color;

  &--primary {
    background-color: $primary-color;
  }

  &--secondary {
    background-color: gray;
  }

  &__icon {
    margin-right: 5px;
  }
}

7. 使用功能性类名

为了确保代码复用和灵活性，推荐使用功能性类名。避免每个元素都使用具体的名称，而是根据功能来命名。

// 功能性类名
.text-center {
  text-align: center;
}

.no-margin {
  margin: 0;
}

8. 使用注释

清晰的注释可以帮助其他开发者理解你的代码。常用的注释格式如下：

// 变量
$primary-color: #3498db;

// 混入
@mixin border-radius($radius) {
  border-radius: $radius;
}

// 主体样式
body {
  font-family: $font-family;
}

• 单行注释：// 用于简短的注释。

• 多行注释：/* */ 用于长注释，尤其是描述某个模块的整体功能或特殊逻辑。

9. 避免重复的样式

尽量避免为相同的元素或组件编写重复的样式，利用 SCSS 的继承、混入等功能来复用样式。

// 使用 mixin 避免重复
@mixin button($color) {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: $color;
}

.primary-button {
  @include button($primary-color);
}

.secondary-button {
  @include button(gray);
}

10. 使用 @use

• @import 已废弃，建议使用 @use 来导入 SCSS 文件。@use 会自动命名空间化导入的样式，避免全局污染。

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

// main.scss
@use 'variables';

.button {
  background-color: variables.$primary-color;
}

总结

遵循这些 SCSS 使用规范有助于保持代码的结构清晰、可读性高、可维护性强。

合理使用变量、嵌套、混入、BEM 命名和文件结构将大大提高开发效率，并避免出现难以调试和维护的代码。