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

介绍

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

使用示例

语法

/* 声明 CSS 变量*/
--somekeyword: left;
--somecolor: #0000ff;

/* 引用 CSS 变量 */
background: var(--somecolor);

基本用法

声明

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

你可以在选择器中声明一个 CSS 变量：

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

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

也可以在内联样式中定义 CSS 变量：

<view
  style={{
    '--main-bg-color': 'yellow',
    '--main-height': '200px',
    color: 'white',
    width: '100%',
  }}
/>

Info

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

引用 CSS 变量

可以在选择器中的引用 CSS 变量对属性进行赋值：

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

也可以在内联样式中引用 CSS 变量对属性进行赋值：

<view
  style={{
    color: 'var(--main-bg-color)',
    width: '100%',
  }}
/>

你也可以通过引用一个 CSS 变量来对另外的 CSS 变量赋值，以在选择器中为例：

.nested-variables {
  --first-var: blue;

  /* 嵌套引用 */
  --nested-reference: var(--first-var); 
}

默认值

当 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 的效果。

兼容性

LCD tables only load in the browser

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

#介绍

#使用示例

#语法

#基本用法

#声明

#引用 CSS 变量

#默认值

#搭配 Calc 表达式

#CSS Variable 作用域

#修改 CSS 变量的值

#通过 JavaScript API 修改

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

#兼容性

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

介绍

使用示例

语法

基本用法

声明

引用 CSS 变量

默认值

搭配 Calc 表达式

CSS Variable 作用域

修改 CSS 变量的值

通过 JavaScript API 修改

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

兼容性