每天60秒CSS——60秒完成iOS Dark Mode自适应

从今天开始,为大家介绍CSS小知识,篇幅不长,撒尿的功夫即可看完,争取每天一更,这是第1篇。

  • 什么是CSS变量?
  • 如何使用?

什么是CSS变量?

CSS变量(官方叫CSS自定义属性),和其他语言里面的变量类似,允许大家通过命名指定的值,以便在CSS中重复使用。
自定义属性符号通常以"--"开头,(如 --my-color: black;) ,并通过var()函数引用(如 --color: var(--my-color);) 。自定义属性对于不同元素、组件间共享样式,起到很大的作用 (如 vertical rhythm, typography variables, color palettes 等)。

如何使用CSS变量?

主题化的需求比如黑暗模式,是CSS变量最常见的例子之一。在这样的需求场景中,我们可以通过设置CSS变量的方式,来控制整个站点的色调、主题,然后将class应用于一个共同的顶级元素(如元素或顶级容器)。

下面的样例,展示了CSS全局变量的定义子元素的继承关系:

/* Global variables are defined in the :root element. */
:root {
  --bg-color: #fff;
  --main-color: #000;
  --secondary-color: #222;
}
/* Elements inherit variables from their parents. */
body {
  background-color: var(--bg-color);
  color: var(--main-color);
}
small {
  color: var(--secondary-color);
}
/* Elements can define their own values and variables, overriding inherited ones.*/
body.dark {
  --bg-color: #080808;
  --main-color: #fff;
  --secondary-color: #ccc;
}

自定义变量一个相当有用的地方是,我们可以为某个元素的不同表现方式定义共享样式,而不必一遍又一遍的copy样式。举个例子:

.btn {
  --bg-color: #002299;
  --text-color: #fff;
  --highlight-color: #669900;
​
  background-color: var(--bg-color);
  color: var(--text-color);
}
/* --highlight-color is also available to the children of .btn */
.btn .highlight {
  color: var(--highlight-color);
}
/* .btn.danger .highlight will use the --highlight-color defined in .btn-danger */
.btn-danger {
  --bg-color: #dd4a68;
  --text-color: #000;
  --highlight-color: #990055;
}

最后,记住以下几条处理CSS变量的小技巧,并灵活使用:

  • var()函数可以通过第二个参数来设置回调callback值,(如 var(--text-color, black));当--text-color变量没有定义时,默认是black。

  • CSS变量是大小写敏感的,同时,还可以像其他HTML样式一样,写在行内 (如

    )。

  • CSS变量可以嵌套使用,比如将其他变量作为回调callback(如 var(--main-color, var(--other-color))),或者传入其他函数如calc(),甚至是把var()函数赋值给另外一个变量(如 var(--main-color, var(--other-color)))。

本文由博客群发一文多发等运营工具平台 OpenWrite 发布

你可能感兴趣的:(每天60秒CSS——60秒完成iOS Dark Mode自适应)