CSS :root变量和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编译器中，我遇到了以下错误：

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

如何将CSS变量传递给函数？

---

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

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

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

- hydrococcus

Answer 1

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

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

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

现在调用你的混合器

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

另一个选项是创建一个mixin来获取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

- Red

---

@RaduM，就SASS 3.5.6而言，具体哪些方面不起作用？ - Red

如果你在 :root { } 中使用 Sass 变量，它们将不会被编译为它们的值。将以下代码放入 https://www.sassmeister.com/ 中，你就会看到。然后切换版本。 $primary: #ffcc00; $secondary: #4b4b4b;:root{ --data-color-primary: $primary; --data-color-secondary: $secondary; } - RaduM

@RaduM 我明白了，感谢您指出。我更新了代码，并添加了适用于SASS v3.5.6+的解决方案。 - Red

Answer 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;
}

- Guest