Sass lightness() 函数不适用于 TailwindCSS 主题变量

Posted 2023-03-07

【中文标题】Sass lightness() 函数不适用于 TailwindCSS 主题变量

【英文标题】：Sass lightness() function not working with TailwindCSS theme variables

【发布时间】：2021-01-02 17:49:44

【问题描述】：

我有一个项目主题的彩色 Sass 地图，让我有机会循环和生成类选项（例如 .row--primary 和 .row--secondary 等），而无需使用 Tailwind 的变量手动指定它们。这些定义如下：

$colors: (
    'primary':      theme('colors.green.700'),
    'secondary':    theme('colors.red.500'),
);

然后使用我的.row 部分，我可以这样做：

.row 
    @each $name, $hex in $colors 
        &--#$name 
            background: $hex;

            // Setting the text colour based on how dark/light the bg is.
            color: set-text-color($hex);
        
    

这里有一个利用 Sass 亮度函数的函数，因此我可以根据背景自动设置深色或浅色文本：

@function set-text-color($color) 
    @if (lightness($color) > 80) 
        @return color('black');
     @else 
        @return color('white');
    

但这会抛出以下内容：Error: argument '$color' of 'lightness($color)' must be a color。

我已经尝试了很多来解决这个问题。当我用基本的十六进制替换使用tailwind变量（theme('colors.green.700')）的主题地图变量时，它可以工作。有什么办法可以让我仍然可以访问 TailwindCSS 变量？

【问题讨论】：

表示theme('colors.green.700')不是颜色。尝试@debug 看看它会返回什么。 sass-lang.com/documentation/at-rules/debug

调试器正在输出DEBUG: color: theme("colors.orange.500")。所以它没有获取与函数关联的 Tailwind 变量，而只是按原样呈现它。

是的，这就是我的猜测。不幸的是，您无法使用 Sass 提取任何“外部”数据。

【参考方案1】：

Tailwind 在 PostCSS 阶段应用，该阶段在 less、scss、sass 处理器之后。因为 theme() 是 Tailwind 函数，所以在预处理器编译期间该值不可用。

这种特殊情况在in the documentation进一步解释。

我还没有尝试过（但很快就会尝试），但您应该能够将颜色值存储在 JSON 文件中。然后使用this plugin 在 SCSS 中导入此文件。然后返回 tailwind.config.js 导入这个 JSON 文件并使用其中的值。这将为您的价值观创造单一的事实来源。