如何使用 Sass 变量和 mixins 与反应 js

Question

As I'm using same set of code in different components. Here is my code structure.

I want to use Sass Variables and mixins so that i don't have to repeat the Same code in different files many times. Here is my Variables file. And I don't know how to use these colors in different files in components.

And There are many buttons which are using same css. How to create one mixin and use it in different places.

Answer 1

You can import your variables.scss file in any of your other scss files and use the variables. Here is an example:-

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

.button {
  color: $main-color;
}

You can use mixins too in a similar way. You can put all your mixins in a file named mixins.scss.

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

and in your component scss file, you can import it and use it

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

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