Переменная Scss в зависимости от класса - PullRequest
Новая
       39

Переменная Scss в зависимости от класса

0 голосов
/ 26 октября 2018

Я пытаюсь сделать тематику для одного из моих проектов, и я был , используя переменные css для того же самого.Я определял переменную css следующим образом 

.theme-1 {
    --var-1: #ffe;
    --var-2: #000;
}

.theme-2 {
    --var-1: #fff;
    --var-2: #000;
}

и в html я применял тему следующим образом 

<div [ngClass]="'theme-1'">
<!--content>

<-->
</div>

Все прекрасно работает, за исключением того, что переменные css не поддерживаются до IE -11 как уже упоминалось Здесь .

Вопрос

Есть ли способ достичь этого с помощью переменных scss, чтобы я мог определять глобальные переменныеи измените значение в зависимости от класса.

Примечание : я использую angular для своего проекта, поэтому мне нужно беспокоиться и об инкапсуляции вида.Было бы здорово, если бы ответ можно было получить с помощью инкапсуляции по умолчанию.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Поскольку SASS компилируется сверху вниз, вы можете переопределить переменные для каждой темы и продублировать общие стили, которые будут скомпилированы для использования правильных значений переменных.

_dark-theme.scss 

// Variables for dark theme
$background-color: #333;
$color: #fff;

_light-theme.scss 

// Variables for light theme
$background-color: #eee;
$text-color: #333;

_common-styles.scss 

// Styles used across all themes, uses theme variables
body {
    background: $background-color;
    color: $text-color;
}

main.scss 

.dark-theme {
    @import "dark-theme";
    @import "common-styles";
}

.light-theme {
    @import "light-theme";
    @import "common-styles";
}

Затем используйте нужный класс темы на верхнем уровне в вашем html. 

<body class="dark-theme">
    ...
</body>
0 голосов
/ 26 октября 2018

Лично я предпочитаю использовать для этого функцию, но вы также можете сделать это с помощью миксина.

Создать карту со свойствами, связывающими столько значений, сколько у вас есть тем.
Затем определитеПользовательское свойство для извлечения этой карты и возврата требуемого значения. 

$theme: (
  color: (#000, #FFF),
  border: (dashed, solid),
  // etc.
);

@function theme($property, $index) {
  @return nth(map-get($theme, $property), $index);
}

.light.foo {
  color: theme(color, 1);
}

.dark.foo {
  color: theme(color, 2);
}

Демо SassMeister

...