码迷,mamicode.com
首页 > Web开发 > 详细

CSS变量使用解析

时间:2019-02-27 17:30:00      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:简单   异常   margin   这一   兼容   作用   全局   很多   roo   

很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容)

最近发现主流浏览器都已经支持了这一变化

这一重要的变化,可能会让你发现,原生CSS从此变的异常强大~,下面看一下如何使用

变量的声明

css的变量声明标识符为:--,即变量名前面加2个连接线

body {
  --head_color: #000;
  --head_bar: #F7EFD2;
}

上面代码中,body选择器里面声明了两个变量。它与正常的属性定义上没有什么不同,只是没有默认含义,所以其又叫做CSS自定义属性

这里需要注意的是,其变量名对大小写是敏感的

变量的引用

变量的引用也很简单,它为我们提供了一个方法专门进行引用,var()函数用于读取变量。

.head {
  color: var(--head_color);
}

这样就引用了,另外,如果你担心变量没有定义,它还提供了默认值的设置方式。

可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。

color: var(--head_color, #7F583F);

需要注意的是,变量值只能用作属性值,不能用作属性名。

如果变量值是数值,不能与数值单位直接连用。

.a {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

数值与单位直接写在一起,必须使用calc()函数,将它们连接。

.a{
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

作用域

变量只能作用于自身以及后代元素,兄弟元素,祖先元素都不能享用。

所以,如果你的变量是全局享用的,则建议放在:root上,例如:

:root {
    --color: red;
}

当然,也可以使用body或者html标签:

body {
    --color: red;
}

 

CSS变量就像JS的变量,每个类名或者花括号就像一个function,里面的变量只有上下文以内可以获取,这就让CSS有了更多可能性。

这使得外部变量稍微改变,整个CSS都可以大大联动,且是实时的。

 

作者:旧旧的 <393210556@qq.com> 解决问题的方式,就是解决它一次

CSS变量使用解析

标签:简单   异常   margin   这一   兼容   作用   全局   很多   roo   

原文地址:https://www.cnblogs.com/widgetbox/p/10445102.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!