CSS
2024-07-18 11:07:54
CSS
Sciter 支持以下单位：
颜色单位;
尺寸单位;
角度 - 标准角度单位（rad、deg、grad、turn）;
持续时间 - 标准时间/持续时间单位（秒、毫秒）;
常数
常量可以全局声明如下：
@const DARK : #222;
body {
background: @DARK;
}
媒体查询
在语法和更新行为方面，媒体查询在Sciter.js中的行为略有不同。
与浏览器行为的区别
最小和最大约束（如
width < 600px和width >= 600px）在屏幕大小更改时触发，而不是像在浏览器中那样在窗口大小更改时触发。有关窗口大小更改行为，请查看此示例
语法
媒体查询表达式语法基于 Javascript 语法：
and是&&min-width: 600px是width >= 600px例如，
@media screen and (min-width: 600px)变成@media screen && (width >= 600px)Sciter.js
您甚至可以声明自己的变量，通过 Javascript 动态设置和更改它们的值，并根据值对要运行的 CSS 规则设置条件：
@media (viewport == "narrow") { div:nth-child(1n) { clear:after; } }
@media (viewport == "normal") { div:nth-child(2n) { clear:after; } }
@media isMobile { .columns { flow: vertical; } }
// set value in JS
Window.this.mediaVars({ viewport: "normal" });
Window.this.mediaVars({ isMobile: false });
样式集
样式集是应用于元素 DOM 子树的样式规则声明的命名块。它允许像 LESS 和 SASS 中使用的样式声明范围
div {
style-set: myStyle;
style-set-base: parentStyle //| inherit styleset from
}
@set myStyle //| inheritance is allowed, myStyle < parentStyle
{
:root { //| Element itself (div)
...
}
p { //| Child element
...
}
}
file.css#myStyle 如果样式文件未包含，则可以从 HTML 中指定它。
<div styleset="#myStyle"></div>
混合
可通过@name应用于 CSS 规则的命名 CSS 属性集可以使用参数。
@mixin LIKE-BUTTON(basecolor)
{
behavior:button;
color: #ffffff;
background: linear-gradient(top, tint(basecolor,+0.3), basecolor);
}
div {
@LIKE-BUTTON(#fff);
...
}
图像映射
@image-map std-tree-icons
{
src: url(sciter:tree-icons-x1.png) 100dpi,
url(sciter:tree-icons-x2.png);
cells:2 1; /* 2 columns, 1 row */
/* logical names of the parts, see radios.png */
items:
plus,
minus;
}