Переменные SASS, установленные внутри условного?

Ответ 1

Да, это возможно:

$parent: true
$foo: red

@if $parent == true 
  $foo: blue

p
  color: $foo

codepen

Однако стоит отметить, что вы не сможете использовать условие для проверки свойства на родительском элементе (или любом другом элементе) в SASS (см. this из руководства SASS), поэтому parent class в вашем коде psuedo необходимо сохранить в sass $variable.

Ответ 2

Вы можете использовать функцию. Например: Как динамически изменять цвет текста...

@function set-color($class) {
  @if ($class == red) {
    @return #f00;
  } @else {
    @return #000;
  }
}
$main-color = set-color($parent-class);

Ответ 3

Так вы делаете это в 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)

Демо: http://sassbin.com/gist/5812941/

Ответ 4

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