文档手册

变量和属性Variables and Attributes

2024-07-18 17:21:03

 变量和属性

 CSS 变量

 声明

Sciter 支持两种形式的变量声明:

  • --name : ... - 默认的CSS变量声明表单;

  • var(name) : ... - Sciter的人体工程学形式;

 例子:

body {
var(text-color): #000;
var(base-width): 100px;
/* 4.4.8.0+ */
--text-color: #000;
--base-width : 100px;
}

 用法

变量从父项遗传给子项。

变量可用于其他属性值声明 - 使用以下任一方法需要字符串、颜色或长度单位的所有位置:

  • var(name,defaultValue) - 如果未声明名称,则用 defaultValue 替换声明;

  • length(name) - Sciter的长度可变专业化形式;

  • color(name) - Sciter的颜色变量专业化形式;

变量使用示例:

div {
color: color(text-color); /* #000 */
width: length(base-width); /* 100px */
height: var(base-height,80px); /* 80px as base-height was not defined */
font-size: var(--base-width); /* 100px */
}

 CSS 属性

 attr(name) 声明

在 Sciter 中,您可以在 CSS 中定义属性的默认值,以便使用 attr(name) : "..." 声明匹配 DOM 元素:

select div {
attr(role) : "option";
}

像这样的声明允许消除 HTML 中的可重复声明,如下所示:

<select|list> 
<div role="option">...</div>
<div role="option">...</div>
 ...
</select>
 注意

基于 CSS 的 DOM 属性声明纯粹是 Sciter 的功能,标准 CSS 没有提供任何接近的东西。

 attr(name) 用法

attr(name) “function” 还可以用作 content 属性的值和其他 attr(name) 声明的值。

 如果您有

<button value="Press me!" />

然后用风格

 button {
content: attr(value);
}

您将看到带有“Press me!”文本的按钮。

注意

Sciter 还支持 parent-attr(name) 从父元素获取属性名称值的值函数。