SCSS 使用指南

项目 SCSS 配置

本项目已成功配置 SCSS/Sass 支持，用于前端样式开发。

已完成的配置

1. 安装依赖

npm install -D sass

2. 文件转换

  • ✅ src/assets/base.css → src/assets/base.scss
  • ✅ src/assets/main.css → src/assets/main.scss
  • ✅ 已删除旧的 CSS 文件

3. 组件更新

所有 Vue 组件的 <style> 标签已更新为使用 SCSS：

  • ✅ src/App.vue - 使用 <style scoped lang="scss">
  • ✅ src/components/HelloWorld.vue - 使用 <style scoped lang="scss">
  • ✅ src/components/WelcomeItem.vue - 使用 <style scoped lang="scss">
  • ✅ src/views/AboutView.vue - 使用 <style lang="scss">

4. 入口文件更新

  • ✅ src/main.ts - 导入路径已更新为 import './assets/main.scss'

SCSS 使用方法

在 Vue 组件中使用 SCSS

1. Scoped 样式（推荐用于组件）

<template>
  <div class="my-component">
    <h1>标题</h1>
  </div>
</template>

<style scoped lang="scss">
.my-component {
  padding: 20px;
  
  h1 {
    color: #333;
    font-size: 24px;
    
    &:hover {
      color: #666;
    }
  }
}
</style>

2. 全局样式

<style lang="scss">
// 全局样式，不使用 scoped
.global-class {
  margin: 0;
}
</style>

SCSS 特性示例

1. 嵌套规则

.container {
  width: 100%;
  
  .header {
    background: #fff;
    
    .title {
      font-size: 24px;
    }
  }
}

2. 变量

// 定义变量
$primary-color: #42b983;
$padding-base: 16px;

.button {
  background-color: $primary-color;
  padding: $padding-base;
}

3. 混合（Mixins）

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

.container {
  @include flex-center;
}

4. 父选择器引用（&）

.button {
  background: blue;
  
  &:hover {
    background: darkblue;
  }
  
  &.active {
    background: green;
  }
  
  &-large {
    padding: 20px;
  }
}

5. 导入其他 SCSS 文件

// 使用现代 @use 语法（推荐）
@use './variables.scss';
@use './mixins.scss';

// 或使用传统 @import 语法（将在 Dart Sass 3.0 中废弃）
@import './variables.scss';
@import './mixins.scss';

项目结构建议

src/
├── assets/
│   ├── styles/
│   │   ├── _variables.scss    # 变量定义
│   │   ├── _mixins.scss       # 混合宏
│   │   ├── _functions.scss    # 函数
│   │   └── base.scss          # 基础样式
│   └── main.scss              # 主样式文件
├── components/
│   └── MyComponent.vue        # 组件内使用 <style lang="scss">
└── views/
    └── HomeView.vue           # 视图内使用 <style lang="scss">

最佳实践

1. 使用 Scoped 样式

在组件中使用 scoped 属性避免样式污染：

<style scoped lang="scss">
// 样式只作用于当前组件
</style>

2. 创建变量文件

创建 src/assets/styles/_variables.scss 存储全局变量：

// _variables.scss
$primary-color: #42b983;
$secondary-color: #35495e;
$font-size-base: 14px;
$border-radius: 4px;

3. 创建混合宏文件

创建 src/assets/styles/_mixins.scss 存储可复用的样式：

// _mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == tablet {
    @media (min-width: 769px) and (max-width: 1024px) { @content; }
  } @else if $breakpoint == desktop {
    @media (min-width: 1025px) { @content; }
  }
}

4. 使用 BEM 命名规范

.block {
  &__element {
    // 元素样式
  }
  
  &--modifier {
    // 修饰符样式
  }
}

5. 避免过深的嵌套

保持嵌套层级在 3-4 层以内，提高可读性和性能：

// ❌ 不推荐
.a {
  .b {
    .c {
      .d {
        .e {
          color: red;
        }
      }
    }
  }
}

// ✅ 推荐
.a {
  .b {
    color: blue;
  }
}

.a-c-d-e {
  color: red;
}

与 Element Plus 集成

如果需要自定义 Element Plus 主题，可以创建变量文件：

// src/assets/styles/element-variables.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #42b983,
    ),
  ),
);

然后在 main.ts 中导入：

import './assets/styles/element-variables.scss'

常见问题

1. SCSS 文件无法识别

确保在 <style> 标签中添加 lang="scss" 属性。

2. 变量未定义错误

确保变量文件已正确导入，使用 @use 或 @import。

3. 样式不生效

检查是否使用了 scoped 属性，如果需要影响子组件，考虑使用深度选择器：

<style scoped lang="scss">
.parent {
  :deep(.child) {
    color: red;
  }
}
</style>

开发服务器

运行开发服务器测试 SCSS 编译：

npm run dev

Vite 会自动处理 SCSS 文件的编译和热更新。

构建生产版本

npm run build

SCSS 文件会被编译为优化后的 CSS 文件。

参考资源