Можно ли установить переменные внутри условия if/else в SASS? Скажем, например, вы хотели иметь 2 цветовых схемы для страницы. Думая о том, как установить класс на тело для обработки цветовых различий, вы могли бы сделать следующее (написанное для английского языка, не пытающееся выполнить какой-либо правильный синтаксис):
If parent class is red then $main-color = #f00 else $main-color = #000
Могу ли я это сделать?
Да, это возможно:
$parent: true
$foo: red
@if $parent == true
$foo: blue
p
color: $foo
Однако стоит отметить, что вы не сможете использовать условие для проверки свойства на родительском элементе (или любом другом элементе) в SASS (см. this из руководства SASS), поэтому parent class в вашем коде psuedo необходимо сохранить в sass $variable.
Вы можете использовать функцию. Например: Как динамически изменять цвет текста...
@function set-color($class) {
@if ($class == red) {
@return #f00;
} @else {
@return #000;
}
}
$main-color = set-color($parent-class);Так вы делаете это в SASS:
.some-element
$main-color: black
color: $main-color
.red > &
$main-color: red
color: $main-color
Результат CSS:
.some-element {
color: black;
}
.red > .some-element {
color: red;
}
Но похоже, что вы пытаетесь применить плохое решение. Опишите, что вы пытаетесь достичь, а не как реализовать решение неизвестной задачи. См. Проблема XY.
UPD
Я думал, что то, чего я пытаюсь достичь, было довольно ясно... но чтобы объяснить далее, я хочу две цветовые схемы для страницы. Один из них по умолчанию и один, только если класс ".red" присутствует в теге body. То, что вы представляете, похоже на то, что мне пришлось бы устанавливать переменные для каждого класса, а затем дублировать для класса .red. Я искал, в основном, 1 переменную (в данном случае $main-color), которая установлена для значения по умолчанию, а затем reset внутри класса .red. Есть смысл?
В SASS нет способа установить переменную на основе того, завершен ли текущий код в класс или нет. Вы можете объявить переменную вручную.
Вы также должны понимать, что то, что SASS делает, порождает CSS, не более того. Так что начните с CSS, который вы хотели бы иметь. Я предполагаю, что это примерно так:
header {
background-color: black; }
#main {
background-color: black; }
body.red header {
background-color: red; }
body.red #main {
background-color: red; }
Вы должны были предоставить такой код в первую очередь, и мне стыдно, что я должен делать слепые догадки.
Этот код может отображаться следующим образом (с той же функциональностью):
header {
background-color: black; }
body.red header {
background-color: red; }
#main {
background-color: black; }
body.red #main {
background-color: red; }
Теперь мы видим шаблон.
Этот код можно легко создать с помощью SASS с помощью mixin:
=main-color()
background-color: black
body.red &
background-color: red
Затем вы применяете его следующим образом:
header
+main-color
#main
+main-color
Другой вариант - создать mixin, содержащий весь стиль. Это, вероятно, оптимальное решение, поскольку оно содержит наименьшее дублирование.
=theme-styles($main-color: black)
header
background-color: $main-color
#main
background-color: $main-color
Затем вы применяете его следующим образом:
+theme-styles
body.red
+theme-styles(red)
Фактически вы можете создавать несколько тем:
+theme-styles
@each $color in red blue green
body.#{$color}
+theme-styles($color)
Sass Variable Scope
Sass поддерживает два типа переменных: локальные переменные и глобальные переменные.
По умолчанию все переменные, определенные вне любого селектора, считаются глобальными переменными. Это означает, что они могут быть доступны из любого места в наших таблицах стилей. Например, heres a глобальная переменная:
$bg-color: green;
С другой стороны, локальными переменными являются те, которые объявлены внутри селектора. Позже, хорошо изучите, как мы можем настроить это поведение. Но пока давайте посмотрим наш первый пример.
Здесь мы определяем mixin, а затем переменную btn-bg-color внутри нее. Это локальная переменная , и поэтому она видима только для кода внутри этого mixin:
@mixin button-style {
$btn-bg-color: lightblue;
color: $btn-bg-color;
}
Заключение
вы можете использовать этот код, чтобы изменить директиву в переменной
$left: left;
$right: right;
@if $dir == rtl {
$left: right;
$right: left;
}
.pull-left{
float:#{$left};
}
вы можете прочитать эту статью Sass Variable Scope