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

Question

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

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

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

Answer 1

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

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

.button {
  color: $main-color;
}

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

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

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

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

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