Vue3 集成 Sass

# Sass 是什么

Sass（Syntactically Awesome Stylesheets）是一种 CSS 预处理器，它扩展了 CSS 的功能，提供了一些编程式的特性，使得样式表的编写更加灵活和易于维护。Sass 可以看作是 CSS 的扩展，它引入了变量、嵌套规则、混合（Mixins）、导入（Import）、继承（Inheritance）等特性，同时还支持使用一些基本的编程概念，如条件语句和循环。

# Sass 的基础

使用 Sass 需要有 Css 的基础，这里就不说 Css 了。Sass 基础文档

# Sass 的优势

1. 变量和嵌套规则：

• 变量： 允许定义并重复使用数值、颜色等，提高代码的可维护性。
• 嵌套规则： 允许以更清晰的方式编写嵌套结构的样式规则，减少选择器嵌套的深度。

2. 混合（Mixins）：

• 提供了可重用的样式块，可以减少重复代码，同时易于维护。

3. 导入（Import）：

• 允许将样式文件分割为多个文件，通过导入组织起来，提高代码的可读性和可维护性。

4. 继承（Inheritance）：

• 允许一个选择器继承另一个选择器的样式，减少代码冗余。

5. 模块化开发：

• Sass 支持将样式表分割为模块，使得团队可以更容易地协同工作，每个开发者专注于特定的模块。

6. 逻辑控制：

• Sass 支持一些基本的逻辑控制，例如条件语句和循环，增强了样式表的灵活性。

# Sass 的劣势

1. 学习曲线：

• 对于新手来说，学习 Sass 可能需要一些时间，特别是对于那些不熟悉 CSS 预处理器概念的人。

2. 编译步骤：

• Sass 需要通过编译器将 Sass 代码转换为浏览器可识别的 CSS 代码，这个编译步骤可能会增加开发流程的复杂性。

3. 过度使用嵌套：

• 如果过度使用嵌套，可能导致生成的 CSS 选择器过于复杂，影响性能和可读性。

# Sass 的特性

1. 模块化：

• Sass 支持将样式表分割为多个文件，通过导入和模块化的方式组织起来，有助于项目的结构和管理。

2. 函数：

• Sass 引入了函数，可以用来执行一些计算和生成动态样式。

3. 颜色操作：

• Sass 提供了颜色操作功能，例如混合颜色、调整亮度、对比度等。

4. 可继承性：

• Sass 的继承特性允许一个选择器继承另一个选择器的样式，减少样式表中的冗余代码。

# Vue3 中全局注册

要在 Vue3 中全局使用 Sass，请使用以下命令安装 sass 包：

npm install sass --save-dev

安装这些包后，在项目的根目录中创建一个名为 vite.config.js 的文件，并添加以下代码：

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';

export default defineConfig({

  plugins: [vue()],

  css: {

    preprocessorOptions: {

      scss: {

        additionalData: `@import '@/assets/main.scss';` // 样式的全局注册，隐式引用

      }

    }

  }

});

这个代码将把 main.scss 文件导入到你 Vue3 项目的所有组件中。

# Vue3 中全局使用

<template>

  <div class="demo-component">

    <!-- Component HTML code here -->

  </div>

</template>

<script setup>

// Component configuration options

</script>

<style lang="scss" scoped>

.demo-component {

  // Sass code for the component

}

</style>

# Vue3 中局部使用

Vue3 中如果未使用样式全局注册，也可以使用显示引入方式。

<template>

  <div class="demo-component">

    <!-- Component HTML code here -->

  </div>

</template>

<script setup>

// Component configuration options

</script>

<style lang="scss" module/scoped>

@import "main.scss"; // 使用 module 必须显示引入方式。

.demo-component {

  // Sass code for the component

}

</style>

如果使用 Vue3 + Vite + Sass + CSS Modules， 可以探索一下插件 vite-plugin-style-import , 并在 vite.config.js 文件中配置。

# CSS Modules 和 Scoped CSS 的相同点

Scoped CSS 和 CSS Modules 都是为了控制 css 的局部作用域，防止类名重复等问题。

# CSS Modules 和 Scoped CSS 的区别

1. CSS Modules

• 选择器：modules 通常是为类名选择添加哈希或其他唯一标识符，以确保这些样式只应用于当前组件或元素。
• 作用域：modules 通常是将样式文件模块化的方法。每个模块都有自己的作用域，这样可以避免全局样式冲突的问题。
• 导出变量： CSS Modules 允许你从样式文件中导出变量，这样在 JavaScript 中可以引用这些变量。这提高了样式和组件之间的耦合度，也使得在 JavaScript 中使用样式更加方便。
• 使用全局变量：可以在模块内部使用全局变量，但必须显式引用。全局注册的无法使用。

2. Scoped CSS

• 选择器：scoped 通常是为类名添加一个 data 属性选择器，属性的值是唯一的，以确保这些样式只应用于当前组件或元素。形如 [data-v-xxxxxxx]。
• 作用域：scoped 通常是限制组件样式的作用范围，防止样式泄漏到其他组件或与全局样式发生冲突。
• 使用全局变量：可以在局部作用域使用外部注册的全局变量，也可以显式导入全局变量使用。

Sass 中文网站