Question

我有一个彩色的Sass项目主题图，使我有机会循环和生成类选项（例如import matplotlib.pyplot as plt import seaborn as sns # a function to compute mode of the histograms shown in Figures `2` and `3` in the paper. def compute_mode(line_object): x = line_object.get_xdata() y = line_object.get_ydata() mode_idx = y.argmax() return x[mode_idx], y[mode_idx] # function to plot the histogram of the layer lists. def make_density(layer_list, color): # Draw the histogram and fit a density plot. ax = sns.histplot(layer_list, kde=True, line_kws={'linewidth': 2}, color=color) # compute mode of the histogram. mode_x, mode_y = compute_mode(ax.lines[0]) # draw a vertical line at the mode of the histogram. ax.axvline(mode_x, color='blue', linestyle='dashed', linewidth=1.5) ax.text(mode_x, mode_y, 'mode: {:.4f}'.format(mode_x)) # Plot formatting ax.set_xlabel('Median Stn. MC-Loss') ax.set_ylabel('Density') layer_list = [1.0, 2.0, 3.0, 4.0, 2.0, 3.0, 1.0, 6.0, 10.0, 2.0] make_density(layer_list, 'green') plt.show()和.row--primary等），而不必使用Tailwind的变量手动指定它们。这些定义如下：

.row--secondary

然后使用我的$colors: ( 'primary': theme('colors.green.700'), 'secondary': theme('colors.red.500'), );部分，我可以这样做：

.row

这里有一个利用Sass亮度功能的功能，因此我可以根据背景自动显示深色或浅色文字：

.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);
        }
    }
}

但这会引发以下情况：@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）的主题映射变量替换为基本十六进制时，它可以工作。有什么办法可以解决，所以我仍然可以访问TailwindCSS变量？

Answer 1

Tailwind是在PostCSS阶段应用的，该阶段比。由于theme（）是Tailwind函数，因此在预处理程序编译期间该值不可用。

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

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

Sass lightness（）函数不适用于TailwindCSS主题变量

1 个答案: