主题
BSS 参考
BSS 是 Behemiron UI 的引擎原生样式 DSL。它保留了常见的选择器和布局书写方式，但公开命名和运行时语义以引擎实现为准，不按浏览器兼容层定义。
命名规则
- 语义已经和常见 CSS 对齐的属性，直接使用标准名，例如
display、width、opacity。 - 引擎原生值或函数使用
bss-前缀，例如bss-sdf(...)、bss-effect(...)、bss-screen。 - 不要继续使用历史别名或“看起来像标准 CSS、但语义并不一致”的写法。
基本结构
css
#root {
width: 220px;
padding: 8px;
display: flex;
gap: 6px;
background: #101927;
}可用的选择器能力包括：
- 基础选择器：元素、类、ID、
* - 关系选择器：后代、直接子、相邻兄弟、通用兄弟
- 属性选择器：
[attr]、[attr=value]、[attr^=prefix]、[attr*=contains]等 - 伪类：
hover、focus、focus-visible、focus-within、active、disabled、enabled、checked - 函数伪类：
not(...)、is(...)、where(...)、has(...)、nth-* - 作用域相关：
host、host(...)、host-context(...)、scope
组合相关公开属性
这几组属性会进入 retained 组合管线：
| BSS 属性 | 运行时要求 | 作用 |
|---|---|---|
opacity | GROUP_ALPHA | 子树整体透明度 |
overflow-clip | MASK | 子树裁剪 / 掩码 |
post-process | FILTER | 子树后处理 |
backdrop | BACKDROP | 采样已绘制背景后再处理 |
blend | BLEND | 最终子树混合模式 |
示例：
css
.card {
overflow-clip: bss-sdf(14, #ffffffff);
post-process: bss-effect(invert, 1);
backdrop: bss-effect(frost, 1.8, #d7f0ffff, 0.58);
blend: bss-screen;
opacity: 0.88;
}常用布局与视觉属性
- 布局：
display、flex-*、grid-*、gap、justify-*、align-* - 盒模型：
margin*、padding*、border* - 尺寸：
width、height、min-*、max-*、aspect-ratio - 定位：
position、top、right、bottom、left、z-index - 文本：
color、font-size、line-height、text-align - 视觉：
background、transform、transition
变量与主题
css
:root {
--accent: #4aa3ff;
--panel-bg: #142236;
}
.panel {
color: var(--accent);
background: var(--panel-bg, #101927);
}var() 支持回退值和嵌套回退。
Utility Class
BSS 现在支持 utility-class 风格写法，可以直接在模板 class 里组合布局、尺寸和组合属性。
xml
<Panel class="w-[320px] p-[12px] flex flex-col gap-3 hover:opacity-80 ui-blend-screen" />当前常见 token 家族包括：
- 布局与显示：
flex、grid、hidden - 间距与边框：
p-*、px-*、gap-*、m-*、border-* - 尺寸：
w-*、h-*、min-w-*、max-h-*、basis-*、aspect-* - 对齐与网格：
items-*、justify-*、content-*、grid-cols-* - 状态变体：
hover:、focus:、focus-visible:、focus-within:、active:、disabled:、enabled: - 组合相关：
ui-post-process-*、ui-backdrop-*、ui-overflow-clip-*、ui-blend-*
SCSS-like 前端能力
BSS 样式前端支持一组 SCSS-like 语法，适合整理大型样式表：
- 变量
- 嵌套
@mixin/@include@function/@return@if@for@each@while%placeholder@extend@layer@container@scope
示例：
css
@mixin panel-shell($bg, $width) {
width: $width;
padding: 8px;
background: $bg;
}
.toolbar {
@include panel-shell(#243248, 84px);
&.compact {
gap: 4px;
}
}取值建议
opacity、overflow-clip、post-process、backdrop、blend直接决定子树组合结果，排障时不要把它们当作普通单元素样式。overflow-clip、post-process、backdrop、blend的引擎原生值继续使用bss-*形式。- 需要查模板指令或组件支持面时，回到 /BehemironEngine/ui/reference/directives 与 /BehemironEngine/ui/reference/components。