Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

自定义属性（--*）：CSS 变量

介绍

自定义属性标记设定值 (比如: --main-color: black), 由 var() 函数来获取值 (比如: color: var(--main-color)); 自定义属性在某个地方定义值，然后在其他地方引用它。

使用示例

csssrc/css_variable_theme/index.tsx
预览

语法

--somekeyword: left;
--somecolor: #0000ff;

基本用法

声明

CSS Variable 是一个名称以两个连字符 (-) 开头的属性，如 --foo。定义之后可以使用 var() 引用的变量。

:root {
  --main-bg-color: yellow;
}

.two {
  --main-height: 200px;
  color: white;
  background-color: black;
  width: 100%;
  height: 100%;
}
INFO

CSS Variable 可以定义在 :root 选择器中表示可以对全局生效，也可以定义在单独的选择器中表示对应用的元件及其子元件生效。

引用 CSS 变量

可以在 CSS 的任何位置引用 CSS 变量：

.three {
  /* --main-bg-color: blue; */
  color: white;
  background-color: var(--main-bg-color);
  width: 50%;
  border: 1px blue solid;
}

默认值

当 CSS 变量无法查找到已定义的 CSS 变量值时，可以使用预先设置的默认值：

.two {
  width: var(--view-width, 100px);
}
INFO

var() 函数第一个逗号以后得部分作为整体返回，用作 var() 的备用值。

搭配 Calc 表达式

在 CSS Variable 声明中，属性值不能直接进行数学运算，需要借助 calc() 函数，类似：

.four {
  background-color: var(--main-bg-color);
  width: 25%;
  height: calc(var(--main-height) - 100px);
}

CSS Variable 作用域

跟普通属性一样，CSS 变量的继承，优先级同样遵循 CSS 级联规则。一个元件上没有定义 CSS 变量，该变量的值会继承其父元件。按照层叠关系向上查找。最终查找到根元件，也即前面例子中用到的: root 选择器所定义的变量。因此，变量的作用域就是它所在的选择器的有效范围。

INFO

由于 CSS Variable 定义在选择器中，作用范围与选择器一致，当选择器应用于某个元件时，选择器上的 CSS 变量也会应用于该元件。

<view className="one" bindtap="tap1">
  <view className="two">
    <view className="three"></view>
    <view className="four"></view>
    <comp></comp>
  </view>
</view>
:root {
  --main-bg-color: yellow;
}

.one {
  color: white;
  width: 100%;
  height: 100%;
}

.two {
  --main-bg-color: red;
  --main-height: 200px;
  color: white;
  background-color: black;
  width: 100%;
  height: 100%;
}

.three {
  --main-bg-color: blue;
  color: white;
  background-color: var(--main-bg-color);
  width: 50%;
  border: 1px blue solid;
}

.four {
  background-color: var(--main-bg-color);
  width: 25%;
  height: calc(var(--main-height) - 100px);
}

对于上面的例子，var(--main-bg-color) 变量的值分别为：

  • 对于 class="three" 的元件：blue;
  • 对于 class="four" 的元件：red;

修改 CSS 变量的值

通过 JavaScript API 修改

你也可以通过在 JS 侧采用 API 来修改 css-variable 的值： 通过 lynx.getElementById().setProperty 方法获取某个元件节点，修改该节点上 css-var 的值：

// 一次性修改一个 CSS 变量
lynx.getElementById('test').setProperty('--main-height', '300px');

// 批次修改css变量
lynx.getElementById('test').setProperty({
  '--main-height1': '300px',
  '--main-height2': '400px',
});
WARNING

setProperty 的参数必须为 Object 或者 String。

通过修改声明了 CSS 变量的选择器

在选择器中可以声明 CSS 变量的值，那么切换对应的祖先节点应用的选择器，则可以修改其对应的值

.a {
  --main-bg-color: red;
}

.b {
  --main-bg-color: blue;
}

.child {
  background-color: var(--main-bg-color);
  width: 25%;
}
<view class={{flag ? 'a' : 'b'}}>
  <view >
    <view className="child"></view>
  </view>
</view>

对于上面的例子，通过切换 class 'a' 或者 'b' 可以达到修改对应变量 --main-bg-color 的效果

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。