Behemiron

主题

BSS 参考（完整） ​

BSS 是 Behemiron 的样式系统，语法接近 CSS，但包含少量 BSS 扩展。

说明：BSS 支持“标准值”和“非标准值”。非标准值必须带 bss- 前缀，例如 white-space: bss-roll;。

1. 选择器语法 ​

1.1 基本选择器 ​

  • 标签：Panel / Button / TextField ...（大小写不敏感）
  • ID：#id
  • 类：.class
  • 通配：*

1.2 属性选择器 ​

支持：

  • [attr]
  • [attr=value]
  • [attr^=value] / [attr$=value] / [attr*=value]
  • [attr~=value] / [attr|=value]
  • 大小写标志：[attr=value i] / [attr=value s]

1.3 伪类（完整列表） ​

  • 交互：:hover :active :focus :focus-visible :focus-within
  • 状态：:disabled :enabled :checked
  • 结构：:first-child :last-child :only-child
  • 同类：:first-of-type :last-of-type :only-of-type
  • 其他：:empty :root
  • BSS 扩展：:bss-visible :bss-hidden :scope :bss-internal
  • 组件相关：:host :host(...) :host-context(...)
  • 表单类：:required :optional :read-only :read-write :placeholder-shown
  • 校验类：:valid :invalid :in-range :out-of-range
  • 语言/方向：:lang() :dir()

1.4 伪函数 ​

  • :not(...) / :is(...) / :where(...)
  • :has(...)（子集，复杂相对选择器不支持）
  • :nth-child(...) / :nth-last-child(...)
  • :nth-of-type(...) / :nth-last-of-type(...)

1.5 组合器 ​

  • 后代：A B
  • 子代：A > B
  • 相邻兄弟：A + B
  • 普通兄弟：A ~ B

2. @ 规则 ​

  • @keyframes name { ... }
  • @media (条件)
  • @supports (条件)
  • @container (条件)
  • @scope (条件)
  • @layer name { ... }

这些规则的行为与 CSS 子集一致。

3. 变量与主题 ​

  • 自定义属性：--primary-color: #ff0000;
  • 使用变量：color: var(--primary-color);
  • 主题：ThemeManager 支持 light/dark/default 与自定义主题。

支持嵌套与 fallback：

css
:root { --spacing: 8px; }
.panel { padding: var(--spacing, 4px); }

4. 数值与单位 ​

4.1 长度/百分比 ​

  • 纯数值：12 视为 12px
  • 百分比：50%
  • 关键字：auto / fit-content / max-content / min-content
  • 非标准值：bss-undefined / bss-stretch

4.2 CSS 数学表达式（子集） ​

支持：

  • calc(100% - 4px)
  • min(...) / max(...) / clamp(...)

限制：

  • 只支持线性 length-percentage 形式
  • length * length 这类非线性不支持

5. 纹理值（Texture） ​

BSS 中 background/overlay 等纹理属性支持以下格式：

标准值 ​

  • none
  • #RRGGBB / rgb() / rgba()
  • url(path)

BSS 扩展（需 bss- 前缀） ​

  • bss-resource:path / bss-namespace:path
  • bss-color(argb)
  • bss-gradient(from, to, horizontal?)
  • bss-sprite(path)
  • bss-sdf(radius?, color?, borderColor?, stroke?)
  • bss-icon(name) / bss-icon(modId, name)
  • bss-builtin-sprite(name)
  • bss-border(color, width?)
  • bss-text(text, color?)
  • bss-animation(path)
  • bss-progress(empty, filled)

6. 属性总表（完整） ​

6.1 基础样式（所有元素） ​

  • background
  • background-color（别名）
  • overlay
  • tooltips
  • z-index
  • opacity
  • overflow-clip
  • transform
  • transition

6.2 布局（Yoga / Flex） ​

  • display
  • layout-direction
  • position
  • left / top / right / bottom
  • margin / margin-*
  • padding / padding-*
  • gap / row-gap / column-gap
  • width / height
  • min-width / min-height
  • max-width / max-height
  • aspect-ratio
  • flex / flex-grow / flex-shrink / flex-basis
  • flex-direction / flex-wrap / order
  • align-items / align-self / align-content
  • justify-content
  • overflow

标准别名：inline-size / block-size / min-inline-size / max-inline-size ... 也可用。

6.3 文本 ​

  • font
  • font-size
  • color
  • text-shadow
  • line-height
  • line-spacing
  • text-align
  • vertical-align
  • white-space
  • adaptive-width
  • adaptive-height
  • roll-speed

6.4 组件专用 ​

  • TextField：

    • text-field-error-color
    • text-field-cursor-color
    • text-field-placeholder
    • text-field-focus-overlay

  • TextArea：

    • text-area-error-color
    • text-area-cursor-color
    • text-area-placeholder
    • text-area-focus-overlay

  • Button：

    • base-background
    • hover-background
    • pressed-background

  • Toggle：

    • unmark-background
    • mark-background

  • Switch：

    • switch-base-background
    • switch-pressed-background
    • switch-unmark-background
    • switch-mark-background

  • Scroller：

    • scroll-delta
    • scroll-bar-size

  • ScrollerView：

    • scroller-view-margin
    • scroller-view-mode
    • scroller-vertical-display
    • scroller-horizontal-display
    • min-scroll-pixel
    • max-scroll-pixel

  • SplitView：

    • split-border-size
    • split-min-percentage
    • split-max-percentage

  • Tab：

    • base-background
    • hover-background
    • selected-background

  • TreeList：

    • tree-node-background
    • tree-node-hover-background
    • tree-collapse-icon
    • tree-expand-icon

  • Menu：

    • menu-node-background
    • menu-leaf-background
    • menu-node-hover-background
    • menu-leaf-hover-background
    • menu-arrow

  • Selector：

    • selector-focus-overlay
    • selector-max-item
    • selector-view-height
    • selector-show-overlay
    • selector-close-after-select

  • SearchComponent：

    • focus-overlay
    • max-item
    • view-height
    • show-overlay
    • close-after-select

  • ProgressBar：

    • fill-direction
    • progress-interpolate
    • progress-interpolate-step

  • GraphView：

    • graph-allow-zoom
    • graph-allow-pan
    • graph-min-scale
    • graph-max-scale
    • graph-grid-background
    • graph-grid-size

  • ItemSlot：

    • item-slot-hover-overlay
    • show-item-tooltips
    • is-player-slot
    • accept-quick-move
    • quick-move-priority

  • Container Query：

    • container-type
    • container-name

7. 常见坑 ​

  • 非标准值必须写 bss- 前缀（否则解析失败）。
  • calc() 只支持 length-percentage 的线性表达式。
  • background 使用函数式纹理时必须 bss- 前缀。

8. 属性细节补充 ​

8.1 tooltips ​

仅支持 翻译 key，且必须使用 bss- 前缀：

css
.item {
  tooltips: bss-item.minecraft.diamond;
}

8.2 transform ​

支持的函数：

  • translate(x, y) / translateX(x) / translateY(y)
  • scale(s) / scale(sx, sy) / scaleX(sx) / scaleY(sy)
  • rotate(deg|rad)
  • pivot(px, py)（非标准，需 bss- 前缀）

8.3 transition ​

语法：

transition: property duration [easing] [delay], ...

示例：

css
.panel {
  transition: opacity 300 ease-in-out, background 500 linear 100;
}

非标准属性必须使用 bss- 前缀。

8.4 white-space（TextWrap） ​

标准值：normal / nowrap / pre / pre-wrap / pre-line / break-spaces
BSS 扩展（需 bss- 前缀）：bss-roll / bss-hover-roll / bss-hide

8.5 text-shadow ​

text-shadow 是 布尔语义：

  • none：关闭
  • 其他标准表达式：开启
  • 若要显式 true/false，必须加 bss- 前缀：bss-true / bss-false / bss-on / bss-off

Copyright © 2025-2026 Behemiron Project. All Rights Reserved.