深入解析CSS中的自定义属性

发布时间：2020-03-12 20:15:23 所属栏目：系统来源：站长网

导读：这篇文章主要介绍了CSS中的自定义属性,谈到了媒体查询的响应式特性、预处理器的使用等重要知识,干货十足,需要的朋友可以参考下

CSS 预处理器是一个非常出色的工具，但是它们的变量是静态的，有语法作用域。Native CSS 变量，从另一面来看，它们是一个完全不同类型的变量：因为它们是动态的，他们的作用域是DOM，事实上，这也是困惑该不该称他们为变量，它们实际上是CSS 属性，这也给了他们一个机会，来解决这个功能完全不同的问题。

在这篇文章中，我将讨论一些CSS 自定义属性这个功能，而且不用CSS 预处理器来做。当然我还演示一些新的设计模式，自定义功能的启用。文章最后讨论一下，我认为在未来最有可能的是预处理变量和自定义变量一起使用，两个东西取长补短，珠联璧合。

预处理器变量的限制
在继续写之前，我想强调的是，我真的很喜欢CSS 预处理器，我的所有项目都在使用它。预处理器做了一件非常了不起的事情，即时你知道他最终出来的就是原始的CSS，任然可以感受这个神器的时代。

任何工具，都有他的局限性，有一个炫酷的外观会让人惊喜而忽略了其中的限制，特别是新用户。

Preprocessor variables aren’t live
也许受预处理限制，在媒体查询中，最常见的新手也无力吐槽定义变量或使用@extend

CSS Code复制内容到剪贴板

$gutter: 1em;

@media (min-width: 30em) {

$gutter: 2em;

}

.Container {

padding: $gutter;

}

如果你编译上面的代码，你得到是：

CSS Code复制内容到剪贴板

.Container {

padding: 1em;

}

如你所见，媒体查询被废弃，变量赋值被忽略。

从理论上讲，虽然sass 负责申明条件变量，但这样做也是一个挑战，枚举所有Permutations—exponentially 会增加CSS的最终大小。

预处理器变量不能级联（层叠）
每当你使用变量，作用域的范围不可避免，这个变量应该全局吗？应该是file/module？还是块作用域？

CSS 最终是为HTML的样式，事实证明还有另外一种有用的方法是变量的范围：DOM 元素，但是preprocessors不能运行在浏览器且从未看见标记。

参考一个网站，试图给<html> 的元素添加一个 class user-setting-large-text 他们更倾向于更大的文本大小。
一旦这个class设置，更大$font-size变量赋值就会运用：

CSS Code复制内容到剪贴板

$font-size: 1em;

.user-setting-large-text {

$font-size: 1.5em;

}

body {

font-size: $font-size;

}

但是，就像上面媒体查询例子，Sass 直接忽略变量赋值，意味着这种事是不可能的。他输出的：

CSS Code复制内容到剪贴板

body {

font-size: 1em;

}

预处理器变量不继承
虽然继承是级联的一部分，但是我还是要提一下，因为很多次我想使用这个功能都未能用成。

有一种情况，你有Dom元素在颜色风格基础上有什么的变化时候，你可以用在他们的父元素上。

CSS Code复制内容到剪贴板

.alert { background-color: lightyellow; }

.alert.info { background-color: lightblue; }

.alert.error { background-color: orangered; }

.alert button {

border-color: darken(background-color, 25%);

}

上面的Sass代码是无效的，但你应该能理解这代码试图要完成什么。

它最后试图使用sass的darken函数用在background-color属性，但button元素继承它的父class元素.alert。如果class info或者error已经添加到alert（或者通过JavaScript设置背景颜色或用户样式），按钮元素希望能够得到这两个颜色。

现在这个虽然不会在sass 运行，因为预处理器不知道DOM结构，但还是希望搞清楚这类型的东西可能有哪些用处。

说一个特定的用例：这也是在继承DOM属性的可访问性运行color 函数的原因。举个栗子，为了确保文本总是可读，且充分与背景颜色形成鲜明对比。通过自定义属性和新的CSS Color函数，这将很快成为可能！

预处理器变量不能相互协作
这是一个明显呈下降趋势的预处理器，如果你用PostCSS 建立一个网站，你想使用第三方组件，不好意思，你只有通过Sass的themeable。

与第三方分享预处理器变量在不同的工具集成或第三方托管的CND样式与都非常困难（至少不容易）。

本地CSS自定义属性将与任何CSS预处理或者原CSS正好相反。

自定义属性有何不同
你可能已经猜到了，我上面列出的适用于CSS 自定义属性没有任何限制，但也许更重要的不是说他们不适用，而是为什么他们不用。

CSS自定义属性就像常规的CSS属性一样，他们的操作方式完全相同。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/5

尾页