CSS: корневые переменные и функции SASS

Question

в заголовке моей HTML-страницы я установил следующие переменные CSS:

:root{ 
  --data-color-primary: #ffcc00; 
  --data-color-secondary: #4b4b4b; 
}

В своем SASS-файле я использую его следующим образом:

DIV.color {

   &.color-primary {
     background-color: var(--data-color-primary);
   }
   &.color-secondary {
     background-color: var(--data-color-secondary);
   }
}

Теперь я пытаюсьустановить цвет шрифта в зависимости от яркости цвета фона:

@function set-notification-text-color($color) {
  @if (lightness($color) > 60) {
     @return #000000;
  } @else {
     @return #ffffff;
  }
}

DIV.color{
   &.color-primary {
      background-color: var(--data-color-primary);
      color: set-notification-text-color(var(--data-color-primary));
   }
}

Но в моем SASS-компиляторе я получаю следующее сообщение об ошибке:

Ошибка: аргумент $color из lightness($color) должен иметь цвет

Как можно передать переменную der CSS функции.

---

Моя проблема в том,Переменные CSS устанавливаются в Backend моей CMS пользователем (Liferay 7) и будут отображаться в * .FTL-файле и печататься в HTML-коде.

$primary: ${clr_primary};
$secondary: ${clr_primary};

, а затем я не могуиспользуйте SASS-переменную $ primary в моем SASS-файле.

Answer 1

SASS Используйте переменные SASS в своих переменных CSS. $primary: #ffcc00; $secondary: #4b4b4b; :root{ --data-color-primary: $primary; // Use #{$primary} if you use SASS v3.5.6+ --data-color-secondary: $secondary; // Use #{$secondary} if you use SASS v3.5.6+ } Теперь вызовите свой миксин DIV.color{ &.color-primary { background-color: $primary; color: set-notification-text-color($primary); } } Другие вариантыбыть, чтобы создать миксин, который извлекает переменную CSS @function color($color-name) { @return var(--data-color-#{$color-name}); } Теперь вызовите эту функцию следующим образом: DIV.color { &.color-primary { background-color: color(primary); color: set-notification-text-color(color(primary)); } } Проверьте эту ссылку для получения полезной информации о комбинировании переменных CSS и SASS https://codepen.io/jakealbaugh/post/css4-variables-and-sass SASS> v3.5.6

Поскольку SASS v3.5.6 установка свойств внутри элемента :root не работает какописано выше.Вместо этого используйте код ниже.

$primary: #ffcc00;
$secondary: #4b4b4b;

:root{ 
  --data-color-primary: #{$primary}; 
  --data-color-secondary: #{$secondary}; 
}