CSS переменная и SCSS миксин - PullRequest
Новая
       1

CSS переменная и SCSS миксин

0 голосов
/ 25 июня 2018

Мне нужно иметь возможность использовать CSS-переменные, потому что мне нужен эффект наведения (background-color), чтобы его можно было настраивать в моем приложении VueJs. Но моя таблица стилей CSS должна иметь значение по умолчанию, которое хранится во вложенной карте SCSS. (map-getter - это функция, которая возвращает значения из вложенных карт)

Я знаю, что мой код SCSS работает, потому что я получаю ожидаемый результат, когда я делаю это: 

.theme--dark .AppNavTile:hover {
  background-color: map-getter($theme-dark, AppNav, hover);
  //returns background-color: rgba(255, 255, 255, 0.87); in my browser's console
}

Чтобы использовать переменные CSS, я могу изменить код следующим образом: 

.theme--dark .AppNavTile:hover {
  --hover-bg-color: red;
  background-color: var(--hover-bg-color);
}

Работает нормально, у меня при наведении курсора на красный фон.

Затем я пытаюсь объединить оба: 

.theme--dark .AppNavTile:hover {
  --hover-bg-color: map-getter($theme-dark, AppNav, hover);
  background-color: var(--hover-bg-color);
}

Согласно консоли браузера это возвращает следующее: 

.theme--dark .AppNavTile:hover {
    --hover-bg-color: map-getter($theme-dark, AppNav, hover);
    background-color: var(--hover-bg-color);
}

Таким образом, кажется, что код SCSS остается некомпилированным в переменной CSS. Есть ли способ обойти это?

Спасибо!

1 Ответ

0 голосов
/ 18 декабря 2018

«Проблема» с переменными CSS в том, что они могут иметь любое значение - почему map-getter ($ theme-dark, AppNav, hover) отображается как есть.Чтобы указать SCSS, что это фактический код SCSS, а не случайная строка, вам нужно использовать интерполяцию (например, если вы используете переменные SCSS внутри calc): 

--hover-bg-color: #{map-getter($theme-dark, AppNav, hover)};
...