SASS: Переопределение переменных во внешних компонентах

Question

Я перехожу с некоторыми из моих текущих CSS в SASS и действительно наслаждаюсь им; однако я столкнулся с проблемой использования переменных. Я пытаюсь реорганизовать компоненты из основного CSS в свои собственные компоненты. Я использую порт SASS Bootstrap для этого.

Я пытаюсь настроить темы, поэтому я переопределяю переменные перед импортом компонентов; однако, если я это сделаю, компоненты не наследуют новые значения. Это то, что мой главный SCSS выглядит следующим образом:

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

вес шрифта все равно будет нормально. Однако, если я не реорганизую компонент кнопок (и сохраняю в основном SCSS), он становится переопределенным. Мне явно чего-то не хватает.

Спасибо, Стивен М.

Edit: Спасибо, Cimmanon, я сфокусировал вопрос сейчас.

Answer 1

Объявление !default для переменной в SASS в основном говорит: «Эй, эта переменная означает это, если иное не указано где-то еще». This "somewhere else" can be above or below your variable, что делает его очень удобным для создания тем или работы с фреймворками, в которых вы хотели бы сохранить предоставленные поставщиками файлы с учетом будущих обновлений.

Итак, вы должны иметь возможность объявить $btn-font-weight: normal; в main.scss и переписать его ниже по потоку $btn-font-weight: bold !default; в _variables.scss.

Это, на ваш ответ, что переезд $btn-font-weight: normal; в конец вашего main.scss компилируется правильно, я подозреваю, что у вас есть еще один $btn-font-weight: not-!default в одном из ваших других импортированных файлов или вам не хватает полу- двоеточие или некоторая такая синтаксическая ошибка.

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