7: CSS

Phlo 在 <style> 块中使用紧凑的、无分号的 CSS 语法。
您可以使用冒号作为分隔符来编写规则：

selector: property: value
嵌套: A: B: property: value → 输出: A B { property: value; }

规则：

一行 = 一个声明。 源代码中没有分号；引擎会添加它们。
冒号 : 分隔链级别以及属性与值。
嵌套中的反斜杠 \ 将 下一个选择器部分 "粘合" 到父级（粘合）。下一个部分可以是伪类（:…）、属性选择器（[…]）等。
@media (…) 可以出现在选择器块中；Phlo 会将其提升 到正确的位置，同时保留当前选择器。

7.1: `<style>` 块

<style>
html: height: 100dvh
body {
  background: #947b6c
  font-family: Sans-serif
  p: line-height: 2em
}
</style>

输出（概念上）：

html { height: 100dvh; }
body { background: #947b6c; font-family: Sans-serif; }
body p { line-height: 2em; }

一个 <style> 块可以通过 ns= 目标一个或多个捆绑命名空间：<style ns=docs> 转换为 www/docs.css，<style ns=app,docs> 转换为两个捆绑，而没有 ns= 的块则转换为 data/app.json 中的 defaultNS。有关命名空间模型，请参见第 2 章。相同的属性也适用于 <script> 块。

7.2: 链和组

用冒号连接；用逗号分组，并且完整上下文应用于每个项目。

<style>
body: h1, p: \:first-letter: color: green
</style>

上下文: body
目标: h1 和 p (与连接的 :first-letter)
在链中的前一个选择器之前的 反斜杠 将该部分与前面的选择器连接在一起。

body h1:first-letter,
body p:first-letter { color: green; }

7.3: 选择器内的媒体查询

您可以在选择器块内部编写 @media (…)；Phlo 会将其移动到正确的位置并保持选择器上下文：

<style>
h1 {
  color: white
  @media (max-width: 768px): color: black
}
</style>

输出：

h1 { color: white; }
@media (max-width: 768px){
  h1 { color: black; }
}

7.4: 变量

Phlo 支持 CSS variables 通过 $names。您可以在 :root 中或任何其他层级定义变量，但 :root 通常是全局主题的定义位置。

<style>
:root {
  $background: #0d0d0d
  $surface: #1a1a1a
  $text: #ffffff
  $accent: #ff4a00
}

body {
  background: $background
  color: $text
}

button {
  background: $accent
  color: $text
}
</style>

输出

:root {
  --background: #0d0d0d;
  --surface: #1a1a1a;
  --text: #ffffff;
  --accent: #ff4a00;
}

body {
  background: var(--background);
  color: var(--text);
}

button {
  background: var(--accent);
  color: var(--text);
}

👉 Phlo 会自动将 $variables 转换为 --custom-properties，并在引用它们的地方使用 var(--...)。
您可以在任何地方重用变量，包括媒体查询和嵌套选择器内部。

7.5: 动态变量

Phlo 的前端引擎包括 DOM/CSS.var 库，它允许您 直接从 JavaScript 读取和更新在 CSS 中定义的 $variables，通过全局的 app.var 对象。

您在 CSS 中的每个 $variable 都会自动作为 app.var.<name> 可用。

示例

<style>
:root {
  $background: #0d0d0d
  $text: #ffffff
}
</style>

<script>
app.var.background = '#000000'
const textColor = app.var.text
</script>

app.var.background = '#000000' → 实时更新 DOM 中 --background 的值，无需重建或重新加载。
const textColor = app.var.text → 读取当前值。

👉 这些更新在浏览器中实时生效，并立即影响所有使用该变量的元素。

您可以将其用于其他用途，包括：

主题切换（深色/浅色模式）
根据用户输入动态调整强调色
无需切换单独的 CSS 类的交互式 UI

工作原理

CSS 引擎将 $background 转换为 --background。
前端引擎通过 document.documentElement.style 进行读写。
app.var 提供一个简单的代理对象，因此您可以像处理普通 JS 属性一样处理这些。

7.6: 完整示例

输入

html: height: 100dvh
body {
  background: #947b6c
  font-family: Sans-serif
  p: line-height: 2em
}
body: h1, p: \:first-letter: color: green
h1 {
  color: white
  @media (max-width: 768px): color: black
}
p {
  color: navy
  \:last-child: color: yellow
}

输出

body {
  background: #947b6c;
  font-family: Sans-serif;
}
body h1:first-letter,
body p:first-letter {
  color: green;
}
body p {
  line-height: 2em;
}
h1 {
  color: white;
}
html {
  height: 100dvh;
}
p {
  color: navy;
}
p:last-child {
  color: yellow;
}
@media (max-width: 768px){
  h1 {
    color: black;
  }
}

7.7: 最佳实践

使用 $variables 来定义颜色、间距和字体；这使得主题和深色/浅色模式变得简单。
在 :root 中定义全局主题变量。
使用选择器链和分组来编写紧凑、可读的代码。
将 @media 直接放在块内；Phlo 会将其提升到正确的位置。
在嵌套中使用 \ 将伪类或属性粘合到父选择器。
代码中不使用分号；Phlo 会生成正确的 CSS 输出。

7.8: Icon sprites

Point icons in data/app.json at one or more folders of PNG files and the build composes them into a single www/icons.png sprite plus the CSS to use them:

{
    "icons": "%app/icons/",
    "iconNS": "app"
}

Naming convention: save.png becomes class .icon.save; save.dark.png becomes the same class scoped to body.dark, so one icon name can have per-context variants (themes, states). Usage in a view:

<i.icon.save/>

The generated CSS lands in the iconNS bundle (default app) and view() preloads the sprite automatically.

Reference. The DOM resources are documented per node in the Manual, generated from the resource files so it never drifts from the code.

最近更新于 2026年9月21日