CODEWITHSUNDEEP
htmlreactjssassreact-hooksnode-sass
Nimra Haider
Nimra Haider

Reputation: 239

how to use Sass variables and mixins with react js

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

enter image description here

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.

enter image description here

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

Upvotes: 2

Views: 6821

Answers (1)

Krishna Vamsi
Krishna Vamsi

Reputation: 156

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);
}

Upvotes: 7

Related Questions