SASS / SCSS изменяет значение переменной перед расширением
У меня есть Bootstrap 3.3.7 и пользовательские файлы scss.
Я хочу переопределить точку останова $ grid-float-break только один раз перед оценкой @extend. Прямо сейчас у меня есть 3 класса, которые расширяют базовый класс начальной загрузки (они используют значение по умолчанию, поэтому я не хочу с ними связываться).
В документации при использовании миксинов и включении это возможно. Возможно ли использование .class и @extend?
Я ищу что-то вроде
$foo : 1px;
.normal-class {
font-size: $foo;
}
.extended-normal-class {
@extend .normal-class;
font-color: yellow;
}
-- This is what I'm trying to do: ---------------------
.override-class {
$foo: 3px;
@extend .normal-class;
// font-size in this class after compile should have 3px;
}
Ответы 1
Чтобы добиться того, что вам нужно, вы должны использовать @mixin вместо @extend, вот следующий пример:
@mixin size($size: 1px){
font-size: $size;
}
.extended-normal-class{
@include size();
}
.override-class{
@include size(3px);
}
@MikeQuoro, значит, вы хотите увеличивать размер шрифта в каждом новом расширении?
Только один раз при расширении я хочу изменить разрешенное значение переменной $ foo.
Изменил ответ в соответствии с этим последним комментарием. @MikeQuoro
Я не могу изменить внешний класс на миксин. В вопросе я упомянул, что знаю, что могу добиться этого с помощью mixin и include, но у меня нет миксинов из начальной загрузки. Bootstrap предоставляет только классы.
При использовании классов boostrap у вас есть много внутренних зависимостей. Просто для обсуждения давайте представим, что в '.normal-class' 15 случаев использования $ foo. Конечно, мы можем вручную переопределить их все, но, возможно, есть какой-нибудь хороший способ просто переопределить базовую переменную $ foo для этого и только для этого @extend (в 'override-class').