CSS自定义属性

我为什么对原生CSS变量感到兴奋

几周前,CSS变量,更准确的说是CSS自定义属性——发布在Chrome Canary版的Experimental Web Platform Features flag。Chrome的工程师@Addy Osmani首次在推特发布时,遭遇到了惊人的否定敌意怀疑。至少我很吃惊,鉴于我对这个属性是如此兴奋。

CSS变量和预处理器变量的差异

变量是CSS预处理器存在的主要原因之一。为某样东西设置变量的能力,比如颜色,在CSS中让变量保持一致,可DRY,并且易于改变是很有用的。出于相同原因,也可以使用原生CSS变量(“CSS自定义属性”)。但有一些重要的差异应该清楚。

CSS条件变量

我将从这里说起: 在W3C标准规范中,使用CSS变量并没有任何条件。我认为这是规范文档中的一个很大的缺陷,CSS变量已经实现了很多我们之前无法实现的功能,并且我们未来可能大量使用,缺失文档描述着实让人沮丧。但是如果现在我们需要这些对CSS变量的描述怎么办?好,借助其他的CSS知识,我们可以在一些实例中略窥一二。

CSS变量创建网格系统

今天要聊的网格系统不是CSS Grid Layout,而要聊的是类似960gs。到止前为止类似于960gs的网格系统成熟的系统有很多套了。

深入学习CSS自定义属性(CSS变量)

我本来觉得应该从介绍CSS中引入变量的用途开始讲起,但事实上,很多流行的CSS预处理/后处理程序已经做了很好的诠释。当然,手动地去搜索或者查找/替换依然能满足你的需求,但这就像是不在JS中使用变量一样--很痛苦。事实上,CSS变量的动态性和作用域能够为你的实践和应用提供更加强大的能力--你可以非常高效的读取、设置和更新这些变量!同时,就像Webkit的小伙伴们在审查工具中做的那样,你也可以避免在你的代码中出现重复的代码片段(冗余)。

页面

返回顶部