CODEWITHSUNDEEP
sass
dagda1
dagda1

Reputation: 28760

Overriding variables in multiple scss files

If I have a structure like this:

|_styles
        |
         ___ _colors.scss
|_components
        |_input
              |_input.tsx
              |_input.scss
        |label
              |_label.tsx
              |_label.scss

And if each component is importing the scss file like this:

import './input.scss';

And each scss file is like this:

@import '_colors.scss';

.default {
  color: $label-default-color;
}

I want to export this library as a package and then be able to default the variables in _colors.scss, but how can I do that if each .scss file is importing the _colors.scss file?

Is there a way of doing this?

Upvotes: 1

Views: 422

Answers (1)

mfluehr
mfluehr

Reputation: 3178

To override a Sass variable, you can simply set a new value.

_color.scss:

// DEFAULT LABEL COLOR
// Note: You can use the !default flag to make sure it
// doesn't override custom colors defined in other files
$label-default-color: red !default;

_label.scss:

// OVERRIDE LABEL COLOR
$label-default-color: blue;

Upvotes: 2

Related Questions