ZC: 下面文章中，“回退值”的概念比较难懂。我的理解：出现 回退值，则 var()中的第一个传入参数就自动忽略了... "回退值" 能否使用 CSS变量？

　　ZC: chrome(版本 51.0.2704.63 m)(x86)，没有看到“回退值” 的效果... “回退值”为变量的情况就 更加无法测试了...

参考网址：

　　http://dobit.top/Detail/215.html

　　https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

　　http://caniuse.com/ 中输入 "css variables"

1、

CSS中的变量给了我们诸多优点：方便、代码重用、更可靠的代码库和提升防错能力。

1、CSS variables示例

1
2
3
4
5
6
7
8
9
10
11
:root {   
  --base-font-size: 16px;   
  --link-color: #6495ed;   
}   
p {   
  font-size: var( --base-font-size );   
}   
a {   
  font-size: var( --base-font-size );   
  color: var( --link-color );   
}

2、CSS variables主要组成

CSS变量主要由以下三部分组成组成：

  • 自定义属性

  • var()函数

  • :root伪类

①自定义属性

自定义属性仅意味着我们自己（创建CSS文件的人）去定义属性的名字。为了自定义一个属性名，我们需要用“--”作为前缀，后面紧跟任意变量名。如果我们要创建一个名字为main-bg-color、值为黑色的自定义属性，可以这样做：

1
2
3
:root {   
  --main-bg-color: #000000; /* --作为前缀，--变量名 */  
}

②var()函数

通过var()函数使用自定义属性（即css变量），否则浏览器不知道它们代表什么。如果想要在p选择器中使用--text-color，可以这样使用var()函数：

1
2
3
4
5
6
7
:root {   
  --text-color: #000000;   
}   
p {   
  color: var( --text-color );  /*使用css 变量 */
  font-size: 16px;   
}

其等价于：

1
2
3
4
p {   
  color: #000000;   
  font-size: 16px;   
}

③:root伪类:放置自定义属性

我们需要一个地方来放置自定义属性。虽然可以在任何样式规则中指定自定义属性，但到处定义属性并不是一个好主意，这对CSS的可维护性和可阅读性是一个挑战。

:root 伪类代表了HTML文档的根元素，这是一个放置自定义属性的好位置，因为我们可以通过其他更具特异性的选择器来覆盖自定义属性值。

3、CSS变量的好处

①可维护性

在一个Web开发项目中，我们经常重复使用一个特定的CSS属性值，如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
h1 {   
  margin-bottom: 20px;   
  font-size: 42px;   
  line-height: 120%;   
  color: gray;   
}   
p {   
  margin-bottom: 20px;   
  font-size: 18px;   
  line-height: 120%;   
  color: gray;   
}   
img {   
  margin-bottom: 20px;   
  border: 1px solid gray;   
}   
.callout {   
  margin-bottom: 20px;   
  border: 3px solid gray;   
  border-radius: 5px;   
}

上面写法的问题：当需要改变某些属性值时，如果我们手动的改变属性值，尤其是当CSS文件很大时，不仅会花费大量时间，还可能会范一些错误。同样的，如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。我们可以使用CSS变量重写,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
:root {   
  --base-bottombottom-margin: 20px;   
  --base-line-height:   120%;   
  --text-color:         gray;   
}   
h1 {   
  margin-bottom: var( --base-bottombottom-margin );   
  font-size: 42px;   
  line-height: var( --base-line-height );   
  color: var( --text-color );   
}   
p {   
  margin-bottom: var( --base-bottombottom-margin );   
  font-size: 18px;   
  line-height: var( --base-line-height );   
  color: var( --text-color );   
}   
img {   
  margin-bottom: var( --base-bottombottom-margin );   
  border: 1px solid gray;   
}   
.callout {   
  margin-bottom: var( --base-bottombottom-margin );   
  border: 1px solid gray;   
  border-radius: 5px;   
  color: var( --text-color );   
}

假设现在的客户说由于文本颜色太亮，导致文本难以阅读，想要改变文本颜色，此时，我们只需要更新一行CSS规则：

1
--text-color: black;

②提高CSS的可读性

自定义属性会使样式表更加易读，也会使CSS属性声明更有语义。

将这个声明:

1
2
background-color: yellow; 
font-size:18px;

和下面的声明比较一下:

1
2
background-color: var( --highlight-color );   
font-size: var( --base-font-size );

像yellow和18px一类的属性值并没有给我们任何有用的上下文信息，但是当我们阅读如--base-font-size和--highlight-color一样的属性名时，即便在其他人的代码，我们都能马上知道这个属性值是在做什么。

4、注意事项

①大小写敏感

自定义属性是大小写敏感的（和普通的CSS规则不一样）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
:root {   
  --main-bg-color: green;   
  --MAIN-BG-COLOR: RED;   
}   
.box {   
  background-color: var( --main-bg-color ); /* green background */  
}   
.circle {   
  VAR(--MAIN-BG-COLOR ); /* red background */  
  border-radius: 9999em;   
}   
.box,   
.circle {   
  height: 100px;   
  width: 100px;   
  margin-top: 25px;   
  box-sizing: padding-box;   
  padding-top: 40px;   
  text-align: center;   
}

注意：--main-bg-color和--MAIN-BG-COLOR是两个变量。

②自定义属性值的解析

当重复声明自定义属性时，其赋值遵循通常的CSS层叠和继承规则。例如下面的示例：

1
2
3
4
5
6
7
8
9
10
11
12
:root {   
  --highlight-color: yellow;   
}   
body {   
  --highlight-color: green;   
}   
.container {   
  --highlight-color: red;   
}   
a {   
  color: var( --highlight-color );   
}

现在a标签颜色值为red；当移除.container规则时，链接的颜色值将是green。

③回退值

当使用var()函数时，可以分配一个回退的属性值，其作为一个额外参数，与第一个参数用“,”隔开。看下面的示例：

1
2
3
4
5
6
7
8
9
10
11
12
div {   
  --container-bg-color: black;   
}   
.box {   
  width: 100px;   
  height: 100px;   
  padding-top: 40px;   
  box-sizing: padding-box;   
  background-color: var( --container-bf-color, red );   /*red 为回退值*/
  color: white;   
  text-align: center;   
}

因为给var()传递了一个回退值参数，所以div的背景色最终被渲染成红色。

④无效值

谨防给CSS属性分配错误类型的值。在下面的示例中，由于自定义属性--small-button被赋予一个长度单位，它被用在.small-button样式中是无效的(因为color的属性类型值出错)。

1
2
3
4
5
6
:root {   
  --small-button: 200px;   
}   
.small-button {   
 color: var(--small-button);   
}

避免这种情况的一个好方式是想出具有描述性的自定义属性名称。例如将上面的自定义属性命名为--small-button-width。

5、浏览器对css variables的支持

CSS变量用起来很方便，但是浏览器对其支持情况不太好，如下图所示：

2、

3、

转载于:https://www.cnblogs.com/h5skill/p/5858169.html

CssVariables_01相关推荐

最新文章

  1. 45 岁，2 万亿身价，苹果的人生才刚刚开始
  2. InnoDB memcached插件部署
  3. js路由在php上面使用,React中路由使用详解
  4. 【Pthon入门学习】多级菜单小例子
  5. 【线上圆桌整理 - 微软】后疫情时代现代化办公新趋势
  6. 作者：​邵蓥侠（1988-），男，博士，北京明略软件系统有限公司技术经理。...
  7. Mac下IDEA安装Protobuf插件
  8. merry chrismas
  9. Android Thing专题5 I2C
  10. 学习笔记(04):2020软考软件设计师--基础知识实战培训视频-数据结构基础--树和二叉树...
  11. Inheritance: 'A' is an inaccessible base of 'B'
  12. 如何设置IE禁用代理服务器
  13. stm32 IAP 程序编写心得
  14. Maxwell终极释放 单芯王者Titan X首测
  15. 基于 selenium 模拟登陆 12306 滑块问题 已解决
  16. Rust的审核团队突然宣布集体辞职
  17. 好用的chrome的插件
  18. virt-viewer的简单使用
  19. HDCP Paring
  20. php试题判断ip是否合法,php检测IP地址是否合法的方法

热门文章

  1. 美国司法部将对大型科技公司展开广泛、新的反垄断审查
  2. 谷歌为何能持续创新？工程经理亲自揭秘“工程师文化”
  3. MIT、CMU 美国计算机专业最牛20名学校大点评
  4. 安装Ubuntu 出现 SQUASFS error / sd 8:0:0:0 :[sdb] assuming drive cache:write through
  5. GetOverlappedResult函数详细解答
  6. Android R.mipmap(或drawable或其他).变量
  7. 计算机软件uml,计算机软件——UML旅游管理系统.pdf
  8. 帝国cms 多个php,帝国cms多值字段数据显示方法
  9. rocketmq 消息指定_详解RocketMQ不同类型的消费者
  10. 06day 03cdbpdb也成为 多租户环境