CSS变量

变量的声明

声明变量的时候,变量名前面要加两根连词线(--)

js 复制代码
body {
  --foo: blue;
  --bar: gold;
}

表明body选择器里面声明了两个变量:--foo--bar

CSS变量与colorwidth等正式属性没有什么不同,只是没有默认含义。所以 CSS 变量(CSS variable)又叫做 "CSS 自定义属性"

$声明变量被 Sass 用掉了,@声明变量被 Less 用掉了。为了不产生冲突,官方的 CSS 变量就改用两根连词线了。

各种值都可以放入 CSS 变量。

js 复制代码
:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --margin-top: calc(2vh + 20px);
}

变量名大小写敏感,--header-color和--Header-Color是两个不同变量。

读取变量

var() 函数用于读取变量。函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。第二个参数不处理内部的逗号或空格,都视作参数的一部分

js 复制代码
a {
  color: var(--foo, #7F583F);;
  text-decoration-color: var(--bar);
}
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var()函数还可以用在变量的声明,取出的变量值是另一个变量的值。

js 复制代码
:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

变量值只能用作属性值,不能用作属性名。

js 复制代码
.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}
--side用作属性名,这是无效的。
相关推荐
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端