创建具有自定义属性，HSL和Little calc（）的彩色主题

在CSS自定义属性（通常称为“变量”）之前，在单个网站上管理多种配色方案需要单独的样式表 - 一种麻烦的方法。现在，我们可以在单个样式表中定义变量，并让CSS处理变体。

即使没有用户定义的主题，范围内的主题也很有价值。例如，不同的部分可能采用不同的调色板。

让我们构建一个示例：我们的示例在各节之间使用一致的轻度，仅变化。单个色调的简化调色板看起来像这样：[[示例为简洁而省略了示例调色板，正如原始作品中的视觉表示]。多种色调会扩展这一点，可以轻松地使用HSL管理一个值。

利用自定义属性

自定义属性广泛支持且容易填充，可为较旧的浏览器提供，提供与标准CSS相似的简单语法。基本用法如下：[正如原始概念上解释的那样，省略了简洁的基本用法示例]。变量通常在:root伪元素上定义，但可以使用诸如数据属性之类的属性将其范围范围为特定元素。

集成calc()

自定义属性不限于固定值。 calc()函数可以在一致的模式中启用动态值计算：[示例使用calc（）省略了简洁的calc（），正如原始概念上所述的那样]。尽管CSS缺乏循环，但预处理器可以帮助生成代码的一部分（但请记住：CSS变量与SASS变量不同）。

实践实施CSS变量

我们的目标是在不同的页面部分更改组件的颜色。我们将使用具有ID的三个部分： #food ， #lifestyle和#travel ，每个部分都与不同的色调相关联。 .wrapper div上的data-theme属性确定活动色调。当#travel处于活动状态时--first-hue （例如，蓝绿色的180°）被分配给--hue 。

<div data-theme="travel">
  
</div>

<style>
.wrapper[data-theme="travel"] {
  --hue: var(--first-hue); /* = 180° = teal */
}
</style>

一个小的JavaScript片段根据单击“ Tabs”单击更新data-theme属性，然后删除哈希（ # ）。这利用JavaScript操纵CSS的能力，与编译后是静态的预处理器变量不同。

渐进式增强

为了确保JavaScript禁用的用户可访问性，我们添加了渐进式增强：

 //渐进式增强：
//没有JavaScript所有部分显示，仅在页面加载时设置主题
wrapper.dataset.theme = wrapper.queryselector（'section'）。id;

即使没有JavaScript，这也可以确保基本功能。

虽然这里使用了单页方法，但是将部分作为单独的页面提供服务器端data-theme设置也是可行的。

替代方法

如果颜色值不会线性变化，我们可以将样式表分开：[示例为简洁而省略，正如原始概念上的概念上的解释]。

支持Web组件

主题Web组件需要:host-context()伪选择器：[示例为简洁而省略，正如原始概念上解释的那样]。

结论

CSS自定义属性简化了网站主题，可提高可维护性，性能和与JavaScript的集成。结合HSL和calc() ，它们解锁功能强大的主题功能，扩展到简单的颜色更改到用户控制的主题。

以上是创建具有自定义属性，HSL和Little calc（）的彩色主题的详细内容。更多信息请关注PHP中文网其他相关文章！