如何在 React js 中使用 Sass 变量和 mixins

Question

因为我在不同的组件中使用相同的代码集。这是我的代码结构。

我想使用 Sass 变量和 mixins，这样我就不必在不同的文件中多次重复相同的代码。这是我的变量文件。而且我不知道如何在组件的不同文件中使用这些颜色。

并且有许多按钮使用相同的 css。 如何创建一个 mixin 并在不同的地方使用它。

Answer 1

您可以在任何其他 scss 文件中导入您的 variables.scss 文件并使用这些变量。这是一个例子：-

@import '../variables.scss'; // you have to give the path here according to your folder structure

.button {
  color: $main-color;
}

您也可以以类似的方式使用 mixins。你可以将所有的 mixins 放在一个名为 mixins.scss 的文件中。

@mixin btn($color) {
  color: $color;
}

在你的组件scss文件中，你可以导入它并使用它

@import '../mixins.scss';
@import '../variables.scss';

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