站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 深入解析CSS中的自定义属性
搜索:
您的位置: 主页 > 教程 > 网页设计 > CSS > » 正文

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

来源: 易采站长站

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

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


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

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

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

CSS Code复制内容到剪贴板
  1. $gutter: 1em;      
  2. @media (min-width: 30em) {      $gutter: 2em;   
  3. }      
  4. .Container {      padding: $gutter;   
  5. }  

如果你编译上面的代码,你得到是:

CSS Code复制内容到剪贴板
  1. .Container {      padding: 1em;   
  2. }  

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

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

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

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

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

CSS Code复制内容到剪贴板
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -