CODEWITHSUNDEEP
variablesimportsass
Steven Mayer
Steven Mayer

Reputation: 661

SASS: Overriding Variables in External Components

I'm transitioning some of my current CSS to SASS, and truly enjoying it; however, I am running into an issue regarding use of variables. I'm trying to refactor the components out of the main CSS into their own components. I am using Bootstrap's SASS port as a guide for this.

I am trying to set up themes, so I'm overriding the variables prior to importing the components; however, if I do this, the components do not inherit the new values. This is what my main SCSS looks like:

$btn-font-weight: bold; // Overriding $btn-font-weight: normal !default;
@import 'variables.scss';
@import 'Components/buttons.scsss';

_variables.scss

$btn-font-weight: normal !default;

_buttons.scss

button {
  font-weight: $btn-font-weight;
}

The font weight will still be normal. However, if I do not refactor the buttons component (and keep in the main SCSS), it does get overridden. I am clearly missing something.

Thanks, Steven M.

Edit: Thank you,Cimmanon, I have focused the question now.

Upvotes: 1

Views: 1345

Answers (1)

fontophilic
fontophilic

Reputation: 1085

Declaring !default for a variable in SASS basically says "Hey this variable means this, unless otherwise specified somewhere else". This "somewhere else" can be above or below your variable, which makes it very handy for creating themes or working with frameworks where you'd like to preserve the vendor provided files incase of future updates.

So, you should be able to declare $btn-font-weight: normal; in main.scss and have it overwrite the downstream $btn-font-weight: bold !default; in _variables.scss.

That said, based on your answer that moving $btn-font-weight: normal; to the end of your main.scss compiles correctly, I'd suspect you've got another $btn-font-weight: not-!default in one of your other imported files or you're missing a semi-colon or some such syntax error.

You can to compile with sourcemaps enabled to debug this problem, as described in this link.

Upvotes: 2

Related Questions