3: CSS

Phlo 有自己紧凑的 CSS 语法：不需要分号，对于单个规则不需要大括号，并且 $variables 编译为 CSS 自定义属性。在本章中，您将为投票提供一个深色卡片布局和一个小主题，在一个专用的样式文件中。

3.1: 样式文件

样式可以存在于任何 .phlo 文件中，但专用文件可以保持整洁。创建 poll.style.phlo：

<style ns=app>
body {
    margin: 0
    background: #0d0f12
    font-family: system-ui, sans-serif
}
main.poll {
    max-width: 560px
    margin: 8vh auto
    padding: 0 24px
}
</style>

ns=app 命名空间告诉构建这个 CSS 属于哪个包；app 命名空间中的所有内容都被编译到 www/app.css 中，view() 会自动链接。ns=app 也是默认值，但写出来可以保持较大应用的可读性。

重新加载 http://localhost/poll：居中列，深色背景。构建在请求时自动运行并重新生成了 app.css。

3.2: 每行一个声明

CSS 解析器将每一行视为一个完整的声明，冒号同时作为选择器嵌套和属性分隔符：

.card {
    background: #16181d
    border-radius: 12px
    padding: 24px
    margin-bottom: 16px
}
h1: margin: 0 0 24px
.card: p: line-height: 1.6em

h1: margin: 0 0 24px 是一行上的完整规则。.card: p: ... 嵌套：它编译为 .card p { line-height: 1.6em; }。除非您以裸露的 : 结束属性行，或者以逗号结束每个续行，否则请勿跨行换行；否则将导致构建错误。

将 .card 块和 h1 行添加到 poll.style.phlo 并重新加载：按钮现在位于一个卡片中。

3.3: 主题变量

$name 在样式块中变成 CSS 自定义属性 --name，你使用它的每个地方都变成 var(--name)。在 :root 中定义主题一次，并在所有地方使用它。这是本教程其余部分的完整 poll.style.phlo：

<style ns=app>
:root {
    $text: #f4f4f5
    $surface: #16181d
    $primary: #ff4a00
    $border: #2a2e36
    $muted: #9aa0aa
}
body {
    margin: 0
    background: #0d0f12
    color: $text
    font-family: system-ui, sans-serif
}
main.poll {
    max-width: 560px
    margin: 8vh auto
    padding: 0 24px
}
h1: margin: 0 0 24px
.card {
    background: $surface
    border: 1px solid $border
    border-radius: 12px
    padding: 24px
    margin-bottom: 16px
}
form: display: inline
button {
    background: $primary
    color: $text
    border: none
    border-radius: 8px
    padding: 10px 18px
    margin-right: 8px
    cursor: pointer
}
</style>

五个变量承载整个主题：$text、$surface、$primary、$border 和 $muted（你将在下一章中使用 $muted 来显示投票计数）。想要稍后使用浅色主题吗？在 :root 中更改五行。

3.4: 检查输出

看看编译器生成了什么：

docker run --rm -v $(pwd)/app:/app ghcr.io/q-ainl/phlo cat /app/www/app.css

你会看到常规的 CSS：:root { --text: #f4f4f5; ... }，button { background: var(--primary); ... }。Phlo 写入分号、大括号和 var() 包装器；你每行写一个声明。

重新加载 http://localhost/poll：一个黑色卡片，上面有问题和四个橙色按钮。页面现在看起来像一个投票。它只是还不能计数。