CSS 变量

[JslinSir]

CSS 变量

描述： 可以使用变量的形式 使用 css 属性值，变量声明大小写敏感

变量的声明

全局变量声明

:root{
   --theme-color: #4d4e53;
}

局部变量声明

body {
   --color: #7F583F;
}

var() 函数的使用

• 可以通过 var () 函数进行变量读取

div{
   background-color: var(--theme-color)
   color:  var(--color)
}

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

div{
   background-color: var(--theme-color,  #FFFFFF)
}

• var 函数还可以用在变量的声明

  :root {
      --primary-color: red;
      --logo-text: var(--primary-color);
  }

需要注意的问题是：变量值只能用作属性值，不能用作属性名

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

关于变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接。

--bar: 'hello';
--foo: var(--bar)' world';

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

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

上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。

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

如果变量值带有单位，就不能写成字符串

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

参考

• CSS 变量教程

[JslinSir]

在小程序中使用 CSS 变量

小程序中也是支持 Css 变量的使用

全局变量

在app.wxss 中声明 如

page{
  --theme-color: #4d4e53;
}

在wxss中的使用

 .color{
     color: var(--theme-color)
}

在 wxml 中的使用

<view style="color:var(--heme-color);">也可以直接在wxml里面使用wxss变量！</view>