现代前端中的Sass

2024-01-02T00:00:00Z | 3 分钟阅读 | 更新于 2024-07-22T01:26:48+08:00

@ flynncao

原文

最近，我发现了一个项目，实现了詹姆斯·克利尔的著名书籍《原子习惯》中提到的方法论；我成功地将所有软件包更新到最新版本以使其正常运行。

老实说，从vue-cli切换到vite非常顺利，因为在大版本中语法没有太大变化。然而，我遇到了一些与Bootstrap和Sass相关的错误。

Sass官方指出@import规则将在不久的将来被弃用；这意味着我们需要在项目中使用@use和@forward。那么@use和@forward的规则是什么呢？

`@use`

我们每天都在处理ES6标准的模块和导出。想象一下，有几个模块如“colors”、“fonts”和“mixins”。将它们全部以下划线开头定义，如_colors.scss。

// ./src/scss/colors.scss
$primary-color: #38f;
$secondary-color: #eee;
$flat-black: #333;

如何使用它？

在另一个文件中，通常是你想在index.html中链接的文件。@use "colors"将加载此样式表模块中定义的所有成员。但我们不能直接使用它；在访问它们时需要一个命名空间前缀。默认情况下是模块名；你可以使用“as”关键字重命名它。

成员在SASS语言中指“mixins”、“变量”和“函数”。

// ./src/scss/styles.scss
@use "./variables/colors" as c;
body{
 background-color: c.$secondary-color;
}

类似地，包含其他模块也非常容易：

// ./src/scss/styles.scss
@use "card";
@use "colors" as c;
@use "variables/fonts"; // 等于`@use "variables/fonts" as fonts`

$transition:all 0.5s ease-in-out;

body{
  font-size:fonts.$font-size;
  background-color: c.$secondary-color;
}
h1{
 color:c.$primary-color;
}

你可以通过将命名空间分配给*使此过程更简单。

@use "colors" as *;

h1{
 color:$primary-color;
}

注意：

样式表的@use规则必须在除@forward之外的任何规则之前，包括样式规则。
@use每次只加载每个文件一次。
@use导入的变量可以被重写，并在所有模块中生效。你可以通过在任何地方添加!default标志来设置初始值。

`@forward`

@forward规则将加载Sass样式表中的所有变量、mixins和函数，并在通过@use在另一个样式表中加载时使其可用。

典型的场景是管理一个文件夹内的不同模块，并在另一个样式表中一次性导入它们。

假设我们在以下路径中有两个模块colors和fonts。

// ./src/scss/variables/_fonts.scss
$font-size:1.5rem;
$font-weight:bold;

// ./src/scss/variables/_colors.scss
$primary-color: #38f;
$secondary-color: #eee;
$flat-black: #333;

然后我们在variables文件夹下创建一个名为_index.scss的新文件，使用@forward规则，前两个模块中的成员将在你使用@use时加载。

// ./src/scss/variables/_index.scss
@forward "colors";
@forward "fonts";

@use "card";
@use "mixins" as *;
@use "./variables" as v;

$transition:all 0.5s ease-in-out;

body{
  font-size:v.$font-size;
  background-color: v.$secondary-color;
}
h1{
 color:v.$primary-color;
}

等于：

@use "card";
@use "mixins" as *;
@use "./variables" as *;

$transition:all 0.5s ease-in-out;

body{
  font-size:$font-size;
  background-color: $secondary-color;
}
h1{
 color:$primary-color;
}

不过，这些成员在你的模块中不可用。如果你尝试使用@forward加载的变量，会发生错误。

@forward "colors";
@forward "fonts";

.box{
 color: colors.$color-primary;
 font-family: fonts.$font-primary;
}
// 错误：没有名为"colors"的模块

与Vue3+Vite配合使用

我们仍然可以在vite.config.js设置中添加预处理器选项，以在目标语言的每个样式内容中注入额外的代码。

https://github.com/vitejs/vite/issues/832

// vite.config.js
export default defineConfig({
    ...,
     css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@use "@/assets/scss/global" as *;`,
    },
  },
 },
})

// /src/assets/scss/_variables.scss
$color-primary: #0074d9;
$color-secondary: #7fdbff;
$color-tertiary: #39cccc;

global模块将在使用@use时加载其所有成员以及variables和mixins中的成员。

// /src/assets/scss/_global.scss
@forward "variables";
@forward "mixins";

$font-roboto: "Roboto", sans-serif;

由于我们最终移除了命名空间，我们可以在任何想要的组件中直接使用这些模块的所有成员：

<script setup>
 ...
</script>

<template>
  ...
</template>

<style lang="scss" scoped >
h1{
 color:$color-primary;
    font-family: $font-roboto;
}
</style>