-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
谈谈一些有趣的CSS题目(13)-- 引人瞩目的 CSS 自定义属性(CSS Variable) #58
Comments
chokcoco
changed the title
谈谈一些有趣的CSS题目(13)-- 引人瞩目的 CSS 变量(CSS Variable)
谈谈一些有趣的CSS题目(13)-- 引人瞩目的 CSS 自定义属性(CSS Variable)
Apr 1, 2019
@zWingz 哈哈 我也是去参加了大会,听了大漠老师的教诲,这才改过来的。 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
13、引人瞩目的 CSS 自定义属性(CSS Variable)
这真是一个令人激动的革新。
CSS 自定义属性,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量。
很多人喜欢称之为 CSS 变量,但是,更准确的说法,应该称之为 CSS 自定义属性 。不过下文为了好理解都称之为 CSS 变量。
一直以来我们都知道,CSS 中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器。
但是新的草案发布之后,直接在 CSS 中定义和使用变量已经不再是幻想了,像下面这样,看个简单的例子:
定义完了之后则是使用,假设我要设置一个 div 的背景色为黑色:
这里,我们在需要使用之前定义变量的地方,通过
var(定义的变量名)
来调用。Demo戳我 -- CSS 变量简单示例。
当然,示例正常显示的前提是浏览器已经支持了 CSS 变量,可以看看 CANIUSE。
CSS 变量的层叠与作用域
CSS 变量是支持继承的,不过这里说成级联或者层叠应该更贴切。
其实也就是作用域,通俗一点就是局部变量会在作用范围内覆盖全局变量。
上面示例中最终生效的变量是
--mainColor:blue
。CSS 变量的组合
CSS 变量也可以进行组合使用。看看下面的例子:
上面 div 的内容将会显示为this is CSS Variable。
Demo戳我 -- CSS变量的组合使用
CSS 变量与计算属性 calc( )
更有趣的是,CSS 变量可以结合 CSS3 新增的函数 calc( ) 一起使用,考虑下面这个例子:
上面的例子,CSS 变量配合 calc 函数,得到的最终结果是
text-indent:100px
。Demo戳我 -- CSS 变量与 Calc 函数的组合
CSS 变量的用途
CSS 变量的出现,到底解决了我们哪些实际生产中的问题?列举一些:
1、代码更加符合 DRY(Don‘t repeat yourself)原则。
一个页面的配色,通常有几种主要颜色,同一个颜色值在多个地方用到。之前的 LESS、SASS预处理器的变量系统就是完成这个的,现在 CSS 变量也能轻松做到。
2、精简代码,减少冗余,响应式媒体查询的好帮手
一般而言,使用媒体查询的时候,我们需要将要响应式改变的属性全部重新罗列一遍。
即便是 LESS 和 SASS 也无法做到更加简便,不过 CSS 变量的出现让媒体查询更加的简单:
看上好像是代码多了,多了一层定义的环节,只是我这里示例的 CSS 改变的样式属性较少,当媒体查询的数量达到一定程度,使用 CSS 变量从代码量及美观程度而言都是更好的选择。
3、方便的从 JS 中读/写,统一修改
CSS 变量也是可以和 JS 互相交互。
与传统 LESS 、SASS 等预处理器变量比较
相较于传统的 LESS 、SASS 等预处理器变量,CSS 变量的优点在于:
CSS 变量的动态性,能在页面运行时更改,而传统预处理器变量编译后无法更改
CSS 变量能够继承,能够组合使用,具有作用域
配合 Javascript 使用,可以方便的从 JS 中读/写
最后
最后,新开通的公众号求关注,形式希望是更短的篇幅,质量更高一些的技巧类文章,包括但不局限于 CSS:
The text was updated successfully, but these errors were encountered: