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

Question

Могу ли я установить переменные внутри условия if/else в SASS? Скажем, например, вы хотели иметь 2 цветовых схемы для страницы. Мышление в терминах установки класса на теле, чтобы обрабатывать цветовые различия, могли бы вы сделать следующее (написано на английском языке, а не пытаться любой вид правильного синтаксиса):

If parent class is red then $main-color = #f00 else $main-color = #000 

Могу ли я сделать это?

Answer 1

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

$parent: true 
$foo: red 

@if $parent == true 
    $foo: blue 

p 
    color: $foo 

codepen

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

Answer 2

Это, как вы делаете это в 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 problem.

UPD

Я думал, что я пытался достичь было довольно ясно ... а дальше объяснять, я хочу 2 цветовые схемы для страницы. Один из них по умолчанию & один, только если класс «.red» присутствует в теге body. То, что вы представляете, похоже на то, что мне пришлось бы устанавливать переменные для каждого класса, а затем дублировать для класса .red. Я искал, в основном, 1 переменную (в данном случае $ main-color), которая задана по умолчанию, а затем перезагружается внутри класса .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 использованием подмешать:

=main-color() 
    background-color: black 

    body.red & 
    background-color: red 

Затем вы примените его, как это:

header 
    +main-color 

#main 
    +main-color 

Другой вариант заключается в создании подмешать, содержащий все стили. Это, вероятно, оптимальное решение, поскольку оно содержит наименьшее дублирование.

=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/

Answer 3

Вы можете использовать функцию. Как это: How to dynamically change text color...

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

Answer 4

Sass Variable Область

Sass поддерживает два типа переменных: локальные переменные и глобальные переменные.

По умолчанию все переменные, определенные вне любого селектора, считаются глобальными переменными. Это означает, что они могут быть доступны из любого места в наших таблицах стилей. Например, вот глобальная переменная:

$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