kk Blog —— 通用基础


date [-d @int|str] [+%s|"+%F %T"]
netstat -ltunp
sar -n DEV 1

CSS变量使用解析

https://blog.51cto.com/u_2865456/5040535

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

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

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

变量的声明

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

1
2
3
4
body {
  --head_color: #000;
  --head_bar: #F7EFD2;
}

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

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

变量的引用

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

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

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

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

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

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

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

1
2
3
4
5
.a {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

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

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

作用域

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

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

1
2
3
:root {
    --color: red;
}

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

1
2
3
body {
    --color: red;
}

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

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

language, web

« DNSSEC学习笔记 Git无法提交branch is currently checked out »