跳到主要内容

CSS自定义属性简介

CSS处理器的最佳功能之一是变量。能够在项目中声明一次并重复使用变量在任何系统中都不应该是可选的。

使用类似的预处理器萨斯(在我们的文章中找到更多信息什么是萨斯?)给你至少一个额外的构建步骤,如果你只想快速构建一个东西,这可能会很痛苦。自从桌面黑客的黑暗日子以来,CSS已经走过了漫长的道路,所以让我们看一下最有用的方面之一:自定义属性。

我们将从一个简单的例子开始。

:root {--color-red:#fc4752; } .site-navigation {background-color:var( -  color-red); } .site-footer {color:var( -  color-red); }

:根伪选择器以DOM中最高级别的父元素为目标,为所有元素提供访问权限- 红色。是的,CSS变量定义应该从一开始-,你可以随时随地访问它们VAR()。好吧,任何在我们的下面级联的地方:根选择。

color-red image

使用var(),您还可以定义回退值,如果给定变量无法访问或不存在,将使用该值

VAR()您还可以定义一个回退值,如果给定的变量无法访问或者该类不存在,将使用该值。

.site-navigation {background-color:var( -  color-red,red); }

值继承自DOM,这意味着您可以使它们更具体。

:root {--color:red; } .site-navigation { -  color:green; background-color:var( -  color); } .site-footer {color:var( -  color); }

一切VAR( - 颜色)是红色的,除了每一个VAR( - 颜色)网站导航。一般来说,覆盖已定义的值并不是理想的做法,但在某些情况下,作用域值仍然是最合适的解决方案。

这些是基础知识,但你可以做更多。一个有用的例子响应式网页设计正在根据视口大小更改布局。

:root {--color-red:#fc4752; --flex-layout:row; } @media(max-width:640px){:root {--flex-layout:column; } .site-navigation {display:flex; flex-direction:var( -  flex-layout,row); background-color:var( -  color-red,red); } .site-footer {color:var( -  color-red); }

在640px下,媒体查询触发,将弹性方向更改为站点导航类上的列,使其内容垂直(列)而不是默认水平(行)。在此示例中,由于提供给站点导航的默认变量,您甚至不需要初始化:根的定义--flex布局;相反,它实际上将直接排。

amedia written in a green bubble

在640px下,媒体查询触发,将弹性方向更改为列,并使内容垂直而不是水平

这很酷,但它并不是一切都很有趣和游戏。例如,由于媒体查询不是元素,因此断点值不能来自自定义属性。虽然CSS工作组有一个使用草案ENV()对于查询,供应商实施和适当的支持可能需要几年的时间才能完成。

没关系。我们将坚持现在的态度。自定义属性的另一个高级用例是切换主题。您可以定义一个基本主题,围绕它构建您的网站,然后将其切换出来,浏览器正在进行繁重的工作。而且它甚至都不那么沉重。

从本质上讲,想想它与Twitter的夜间模式一致,但没有你实际切换CSS(我看到你)。

输入颜色的拾取值替换文档- 颜色价值,做出改变顺利。您可以使用混合模式,Alpha通道颜色或png - 无限的可能性和乐趣。

white text saying - - dark on a dark background

您可以围绕一个基本主题构建您的网站,然后将其切换出来,浏览器正在进行繁重的工作

现在有了面向未来的CSS,它不依赖于任何第三方开发人员并且只使用自定义属性,很有可能您已经被覆盖并准备开始生产。

但是,如果你想在代码中使用除变量之外的其他东西,那么让我们说CSS模块呢?截至今天,对于现有的CSS功能,如模块或嵌套,你不能再花费额外的构建步骤了,但是你可以实现它,并且在供应商赶上规范时不必重写代码。

您不应每次想要改进输出时重构CSS,而应该首先在符合这种方式的规范中编写代码。这是预处理器和后处理器之间的主要区别。实际上,预处理器为您编写CSS(基本上是从文本文件中),而后处理器将您已经有效的CSS与更多浏览器支持对齐,后者为您提供了更大的灵活性。

使用本机方法总是优于变通方法,拥有未来技术的工作知识是学习CSS时的最佳位置。

本文最初发表于306期 ,这是全球最畅销的网页设计师和开发者杂志。 在这里订阅网 

相关文章:



翻译字数超限