CSS：根变量和 SASS 函数答案

【问题标题】：CSS :root variables and SASS FunctionsCSS：根变量和 SASS 函数
【发布时间】：2019-03-07 07:31:04
【问题描述】：

在我的 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 必须是颜色

如何将 der CSS 变量交给函数。

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

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

然后我不能在我的 SASS 文件中使用 SASS 变量 $primary。

【问题讨论】：

标签： css sass

【解决方案1】：

在您的 CSS 变量中使用 SASS 变量。

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

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

现在调用你的 mixin

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

【讨论】：

@RaduM 从 SASS 3.5.6 起，什么特别不起作用？
如果你在 :root { } 中使用 Sass 变量，它们将不会被编译成它们的值。将以下代码放入sassmeister.com，你就会看到。然后切换版本。 $初级：#ffcc00； $中学：#4b4b4b； :root{ --data-color-primary: $primary; --data-color-secondary: $secondary; }
@RaduM 我明白了，感谢您的指出。我更新了代码并添加了 SASS v3.5.6+ 的解决方案。

【解决方案2】：

如果您需要在 :root 之外更改 CSS 变量，您可以执行以下操作

.class {
  // sass-lint:disable no-duplicate-properties
  #{--background}: transparent;      
  #{--background-focused}: transparent;
  // sass-lint:enable no-duplicate-properties
}

编译成

.class {
  --background: transparent;      
  --background-focused: transparent;
}

【讨论】：