как изменить переменную на основе селектора в sass - PullRequest
Новая
       32

как изменить переменную на основе селектора в sass

1 голос
/ 02 мая 2019

Я хочу переключить тему в своем проекте, и я использовал sass в качестве моего препроцессора css. Я объявил все переменные для темы, и я хочу изменить значения объявленной переменной на основе селектора. Мой текущий код: 

$nightSelector: '.night';
$daySelector: '.day';

#{$nightSelector} {
    $headerBgColor: #333;
}
#{$daySelector} {
    $headerBgColor: #f3f4f8;
}
header {
    background: $headerBgColor;
}

Получение ошибки компиляции с неопределенным значением $ headerBgColor. Есть ли правильный способ сделать это? Или предоставьте любое решение для достижения этой цели. Я Vue, как мой интерфейс Заранее спасибо.

1 Ответ

0 голосов
/ 02 мая 2019

Переменные SCSS являются статическими (используются для создания вывода CSS), поэтому их нельзя использовать для динамического изменения значений в зависимости от контекста (это работа для переменных CSS).

Пример 1 - только переменные SCSS

SCSS 

$nightSelector: '.night';
$daySelector  : '.day';

header {
    #{$nightSelector} &,
    &#{$nightSelector} { background: #333; }

    #{$daySelector} &, 
    &#{$daySelector} { background: #f3f4f8; }

}

Вывод CSS 

.night header, header.night {
  background: #333;
}
.day header, header.day {
  background: #f3f4f8;
}

HTML 

<header class="night">Lorem</header>
<header class="day">Lorem</header>

<body class="night">
  <header>Lorem</header>
</body>

<body class="day">
   <header>Lorem</header>
</body>

Пример 2 - переменные SCSS + CSS

SCSS 

$nightSelector: '.night';
$daySelector: '.day';

#{$nightSelector} {
    --header-bg-color: #333;
}
#{$daySelector} {
    --header-bg-color: #f3f4f8;
}
header {
    background: var(--header-bg-color);
}

Вывод CSS 

.night {
    --header-bg-color: #333;
}
.day {
    --header-bg-color: #333;
}
header {
    background: var(--header-bg-color);
}

HTML 

<header class="night">Lorem</header>
<header class="day">Lorem</header>

<body class="night">
  <header>Lorem</header>
</body>

<body class="day">
   <header>Lorem</header>
</body>
...