我在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编译器中,我遇到了以下错误:
错误:lightness($color)的参数
$color
必须是颜色
如何将CSS变量传递给函数?
我的问题是,CSS变量由用户在我的CMS的后端(Liferay 7)设置,并将在*.FTL文件中呈现,在HTML代码中打印。
$primary: ${clr_primary};
$secondary: ${clr_primary};
然后我无法在我的SASS文件中使用SASS变量$primary。