有没有办法在scss中创建全局变量？

Question

我想在 Home.scss 文件中创建一组变量，可以在其他 scss 文件中重用这些变量，而无需在其他 scss 文件中重新键入或复制并粘贴这些变量。

我有办法做到这一点吗？

$Matte-P-1: #572991;
$Matte-P-2: #7550A6;
$Matte-P-3: #68369B;

我希望这些变量在我的 Home.scss、component.scss 和 nav.scss 中工作。

有什么建议吗？

Answer 1

有几种不同的方法可以做到这一点，但相对容易达到预期的效果。

方法 1 - 导入到每个需要的 SCSS 文件中

创建一个文件（例如

constants.scss

）并将其导入到每个组件 SCSS 文件中。

    ├── components/
    ├── styles/
    │   ├── component.scss
    │   ├── constants.scss
    │   ├── home.scss
    │   ├── nav.scss

// constants.scss

$Matte-P-1: #572991;
// ...

然后在另一个文件中（如

nav.scss

）：

// nav.scss
@use "./constants"
// @use or @import "path_to_constants_file"

.myClass {
  background-color: $Matte-P-1
}

仅供参考：我在这里使用了

@import

，因为它是推荐选项看到这个问题讨论差异

专业人士：

• 允许您将每个 SCSS 文件与组件一起放置（只要您相应地导入常量文件（您可能具有上面或下面的目录结构，其中任何一个都可以，因为它只是让导入正确）

   ├── components/
   │   ├── Home/
   │   |   ├── home.jsx
   │   |   ├── home.scss
   │   ├── Nav/
   │   |   ├── nav.jsx
   │   |   ├── home.scss
  

缺点：

• 此解决方案的权衡是，您需要将其导入到您创建的每个新 SCSS 文件中，并希望使用其中的变量（这很容易被忘记）

方法 2 - “主”SCSS 文件

有时首选 SCSS 的一个停靠点，您的目录可能如下所示：

    ├── components/
    ├── styles/
    │   ├── component.scss
    │   ├── constants.scss
    │   ├── home.scss
    │   ├── main.scss
    │   ├── nav.scss

constants.scss

文件看起来与第一个示例相同，

main.scss

看起来像这样：

// main.scss

// import global style/variables
@import "./constants"
// ...

// import component  style
@import "./component"
@import "./home"
@import "./nav"
// ...

然后在

App.jsx

中，您将仅导入

main.scss

文件。

专业人士：

• 对

  main.scss

  或

  constants.scss

  文件的任何更改都会自动可供其他文件使用（这取决于顺序，因此为什么

  constants

  在组件之前先导入）
• 只有一个

  main.scss

  导入您的

  App.jsx

缺点：

• 此解决方案的权衡是，它现在看起来更加单一，因为所有 SCSS 都被导入到一个主文件中，然后被使用