CSS：root变量和SASS函数 [英] CSS :root variables and SASS Functions

问题描述

在我的HTML页面的标题中，设置了以下CSS变量：

in the Header of my HTML-Page i set the following CSS Variables:

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

在我的SASS文件中，我按以下方式使用它：

In my SASS-File i use it as follow:

DIV.color {

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

现在我尝试设置字体颜色，具体取决于背景颜色的亮度：

Now i try to set the font-color depending on the brightness of the background-color:

@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-compliler中，我得到以下信息出现以下错误：

But in my SASS-compliler i get the following i get the following Error:

错误：参数 $ color 的 lightness（$ color）必须是颜色

如何将CSS交出

我的问题是，CSS变量是由用户（Liferay）在CMS后端中设置的7）将呈现为* .FTL文件，并以HTML代码打印。

My Problem is, the CSS Variables are set in the Backend of my CMS by User (Liferay 7) an will be rendered in a *.FTL-File and is printed in the HTML-Code.

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

然后我无法在我的SASS文件中使用SASS-Variable $ primary。

and then i cant use the SASS-Variable $primary in my SASS-File.

推荐答案

在CSS变量中使用SASS变量。

Use SASS variables in your CSS variables.

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

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

现在调用您的mixin

Now call your mixin

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

---

另一个选择是创建一个可获取CSS变量的mixin

---

Another options would be to create a mixin which retrieves the CSS variable

@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变量

Check out this link for usefull information about combining CSS and SASS variables

https ：//codepen.io/jakealbaugh/post/css4-variables-and-sass

这篇关于CSS：root变量和SASS函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！