如何在CSS中使用变量

自定义属性和调色板

自定义属性尤其适用于管理HSL调色板。奥软代表色相，饱和度，明度．这是一个基于光的颜色模型，类似于RGB。我们可以在CSS中使用HSL值，这得益于奥软()而且hsla ()颜色的功能。的奥软()函数接受三个参数:色调、饱和度和亮度。的hlsa ()函数还接受第四个参数，指示颜色的alpha透明度(值在0到1之间)。

RGB系统将颜色表示为红、绿和蓝的比例，而HSL使用一个颜色圈，其中色相是该圈上的度位置，色调或阴影使用饱和度和明度值定义。饱和度可以从0%到100%，其中0%是灰色，100%是全色。明度也可以从0%到100%，其中0%是黑色，100%是白色，50%是正常颜色。

彩色轮by<一个href="https://openclipart.org/detail/226044/chromatic-wheel" class="" target="_blank" rel="noreferrer noopener">CrazyTerabyte从Openclipart。

在HSL颜色系统中，红、绿、蓝三原色分别位于120度，分别为0度/360度、120度和240度。次生色——青色、品红和黄色——也相距120度，但与原色相对，分别为180度、300度和60度/420度。第三色、第四色和其他颜色介于两者之间，大约递增10度。蓝色是用HSL符号写的Hsl (240, 100%， 50%)．

参数单位

类的第一个参数使用无单位值时奥软()而且hsla ()函数，浏览器假设它是一个角度单位。但是，您可以使用任何一种<一个href="https://drafts.csswg.org/css-values-4/" class="" target="_blank" rel="noreferrer noopener">支撑CSS角单位．蓝色也可以表达为Hsl(240度，100%，50%),Hsl (4.188rad, 100%， 50%)或Hsla(0.66转，100% 50%)．

有趣的地方就在这里。我们可以使用自定义属性设置色调值，并通过调整饱和度和明度值来设置浅色调和暗色调:

:根｛——brand-hue：270度；/*紫色*/——brand-hue-alt：二十五分转；/*绿色*//* hsl()和hsla()可以接受逗号分隔或空格分隔的参数，但较老的浏览器(如Internet Explorer 11)只支持逗号分隔的参数。* /——brand-primary：奥软（var（——brand-hue）One hundred.％50％）；——brand-highlight：奥软（var（——brand-hue）One hundred.％75％）；——brand-lowlight：奥软（var（——brand-hue）One hundred.％25％）；——brand-inactive：奥软（var（——brand-hue）50％50％）；——brand-secondary：奥软（var（——brand-hue-alt）One hundred.％50％）；——brand-2nd-highlight：奥软（var（——brand-hue-alt）One hundred.％75％）；——brand-2nd-lowlight：奥软（var（——brand-hue-alt）One hundred.％25％）；——brand-2nd-inactive：奥软（var（——brand-hue-alt）50％50％）；}

上面的CSS提供了如下所示的调色板。

这是一个简单的版本，但你也可以使用自定义属性来调整饱和度和亮度值。

健壮的调色板生成

Dieter Raber在“<一个href="https://css-tricks.com/creating-color-themes-with-custom-properties-hsl-and-a-little-calc/" class="" target="_blank" rel="noreferrer noopener">使用自定义属性、HSL和一个小calc()创建颜色主题”。

另一种想法是将自定义属性和钙()函数从基本色相生成正方形配色方案。让我们在下一个例子中创建一个方形配色方案。一个方形配色方案由四种颜色组成，它们在色轮上彼此等距离，即相隔90度:

:根｛——base-hue：310度；/*粉红色*/——距离：90度；——颜色：奥软（var（——base-hue）,One hundred.％,50％）；——color-b：奥软（calc（var（——base-hue）+var（——距离））,One hundred.％,50％）；——color-c：奥软（calc（var（——base-hue）+（var（——距离）＊2））,One hundred.％,50％）；——color-d：奥软（calc（var（——base-hue）+（var（——距离）＊3.））,One hundred.％,50％）；}

这部分CSS为我们提供了如下所示的热带色彩方案。

自定义属性也可以很好地用于媒体查询，我们将在后面的小节中看到这一点。

使用CSS变量制作Dark Theme调色板

您可以使用CSS自定义属性为站点上的深色和浅色主题定义一组变量。

以下面的页面样式为例，在为中对应的颜色定义自定义属性后，我们可以用变量替换不同选择器中的所有HSL颜色:根：

:根｛/ * * /——nav-bg-color：奥软（var（——primarycolor）,50％,50％）；——nav-text-color：奥软（var（——primarycolor）,50％,10％）；——container-bg-color：奥软（var（——primarycolor）,50％,95％）；——content-text-color：奥软（var（——primarycolor）,50％,50％）；——title-color：奥软（var（——primarycolor）,50％,20.％）；——footer-bg-color：奥软（var（——primarycolor）,93％,88％）；——button-text-color：奥软（var（——primarycolor）,50％,20.％）；}

已经为自定义属性使用了适当的名称。例如,——nav-bg-color是指导航背景的颜色,而——nav-text-color是指前景色/文本的颜色．

现在复制:根选择器的内容，但添加主题属性黑暗值:

:根［主题＝“黑暗”］｛/ * * /}

此主题将被激活，如果主题属性。黑暗值被添加到< html >元素。

我们现在可以手动处理这些变量的值，通过降低HSL颜色的明度值来提供一个黑暗的主题，或者我们可以使用其他技术，如CSS过滤器转化()而且亮度()，通常用于调整图像的渲染，但也可以用于任何其他元素。

将以下代码添加到主题:根(= '黑暗']：

:根［主题＝“黑暗”］｛——暗色调：240；——light-hue：250；——primarycolor：var（——暗色调）；——nav-bg-color：奥软（var（——primarycolor）,50％,90％）；——nav-text-color：奥软（var（——primarycolor）,50％,10％）；——container-bg-color：奥软（var（——primarycolor）,50％,95％）；——content-text-color：奥软（var（——primarycolor）,50％,50％）；——title-color：奥软（——primarycolor,50％,20.％）；——footer-bg-color：奥软（var（——primarycolor）,93％,88％）；——button-text-color：奥软（var（——primarycolor）,50％,20.％）；过滤器：反（1）亮度（0.6）；}

的转化()滤镜颠倒所选元素中的所有颜色(本例中的每个元素)。反转值可以用百分比或数字来指定。值为100%或1将完全颠倒元素的色调、饱和度和明度值。

的亮度()滤镜使元素更亮或更暗。值为0结果在一个完全黑暗的元素。

的转化()滤镜使一些元素非常明亮。这些都是通过设置来淡化的亮度(0.6)．

有不同黑暗程度的黑暗主题: