Использование переменных CSS как аргументов функции Sass

Есть ли способ использовать переменные CSS с функциями Sass, например, lighten? Что-то вроде этого:

:root {
  --color: #ff00ff;
}

.div {
  background-color: lighten(var(--color), 32%);
}

Я получаю сообщение об ошибке, что " $color аргумента Argument $color lighten($color, $amount) должен быть цветом".

Я использую переменные CSS (не Sass), потому что мне нужно использовать их в js.

Ответ 1

ОБНОВИТЬ:

Я просто прочитал, что Sass 3.5.0 теперь должен поддерживать пользовательские свойства CSS с помощью собственных функций CSS. Я пробовал это с помощью node-sass, но пока libsass не поддерживает эту функцию Ruby Sass 3.5

Для собственных CSS-функций я думаю, что sass заменяет их своей собственной реализацией, поскольку мне пришлось использовать строчную интерполяцию в Sass для компиляции моего css:

--Primary: #{"hsl(var(--Ph), var(--Ps), var(--Pl))"};

Для функций Sass самая близкая вещь, которую я придумал с помощью чистого CSS для легкости (не будет работать с IE, очевидно), заключается в том, чтобы отделить значения цвета от оттенка, насыщенности и легкости для использования внутри hsl(). Это также можно использовать с rgba(), но hsl() можно использовать для более легкого управления оттенками для темы приложения:

:root {
    --P-h: 203;
    --P-s: 82%;
    --P-l: 41%;
    --Primary: hsl(var(--P-h), var(--P-s), var(--P-l));
}

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

:root {
    --Primary-20: hsl(var(--P-h), var(--P-s), calc(var(--P-l) * 0.8));
}

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

Ответ 2

Вы можете использовать CSS Colorvars (csscolorvars.github.io), и вы получите функцию яркости и прозрачности, чтобы иметь возможность применять яркость, темноту и прозрачность в вашей переменной цвета.

:root {
  --primary-color: #ff0c22;
  --primary-HS: 355, 100%;
  --primary-HSL: 355, 100%, 52%;
  --secondary-color: #663399;
  --secondary-HS: 270, 50%;
  --secondary-HSL: 270, 50%, 40%;
}

.block{
  background-color: hsl(var(--primary-HS), 60%);
  /*
  Is equivalent to what is desired:
  background: lighten(var(--primary-color), 8%)
  */
}

Ссылка CSS Colorvars: https://csscolorvars.github.io/

Любые проблемы комментируйте в: https://github.com/CSSColorVars/csscolorvars/issues

Ответ 3

Переменные CSS не поддерживаются в IE.

Кроме того, lighten является функцией предварительных процессоров CSS, поэтому, если вы добавите его в CSS в своей не скомпилированной форме, он просто сломает ваш код, поскольку CSS не будет знать, что это такое

Я предлагаю pseudo-elements

См. Этот пример

div>div {
  height: 150px;
  width: 150px;
  margin: .5em auto;
  display: inline-block;
}

.red {
  background-color: red
}

.blue {
  background-color: blue
}

.green {
  background-color: green
}

.lighten,
.darken {
  position: relative;
}

.lighten::after,
.darken:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lighten::after {
  background-color: rgba(255, 255, 255, .4);
}

.darken::after {
  background-color: rgba(0, 0, 0, .4);
}

<div>
  <div class="red lighten"></div>
  <div class="red"></div>
  <div class="red darken"></div>
</div>

<div>
  <div class="blue lighten"></div>
  <div class="blue"></div>
  <div class="blue darken"></div>
</div>

<div>
  <div class="green lighten"></div>
  <div class="green"></div>
  <div class="green darken"></div>
</div>