首页 文章

CSS：根变量和SASS函数

提问于
浏览 次
0

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

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

在我的SASS-File中，我使用如下：

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-compliler中我得到以下内容我得到以下错误：

错误：参数$ color of lightness（$ color）必须是一种颜色

怎么可能将CSS变量移交给函数 .

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

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

然后我不能在我的SASS文件中使用SASS-Variable $ primary .

css sass

1 回答

  • 3

    在CSS变量中使用SASS变量 .

    $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变量的mixin

    @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

    更新2018-11-06

    由于 :root 元素内的 SASS v3.5.6 设置属性不起作用，如上所述 . 而是使用下面的代码 .

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

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

相关问题