一个使用 CSS 属性的 Datasette 输出插件，极具实验性，灵感来自 Chris Coyier 的文章 Custom Properties as State。

关于此项目的更多信息：无需 JavaScript 的 CSS API：datasette-css-properties 插件

在 Datasette 所在的同一环境中安装此插件。

$ datasette install datasette-css-properties

安装后，此插件会为每个查询结果添加 .css 输出格式。这将把查询结果的第一行作为有效的 CSS 文件返回，将每一列定义为一个自定义属性。

示例：https://latest-with-plugins.datasette.io/fixtures/roadside_attractions.css 生成以下内容

:root {
  --pk: '1';
  --name: 'The Mystery Spot';
  --address: '465 Mystery Spot Road, Santa Cruz, CA 95065';
  --latitude: '37.0167';
  --longitude: '-122.0024';
}

如果您将此样式表链接到您的页面，就可以执行以下操作：

<link rel="stylesheet" href="https://latest-with-plugins.datasette.io/fixtures/roadside_attractions.css">
<style>
.attraction-name:after { content: var(--name); }
style>
<p class="attraction-name">Attraction name: p>

默认情况下，值将作为 CSS 字符串被引用。如果您想返回一个不带引号的“原始”值——例如，用于设置数值或颜色等 CSS 属性，您可以使用 ?_raw=column-name 参数指定该列名。此参数可以多次传递。

请看此示例查询

select
  '#' || substr(sha, 0, 6) as [custom-bg]
from
  commits
order by
  author_date desc
limit
  1;

此查询返回最新提交的前 6 个字符，并带有 # 前缀。.css 输出渲染版本如下所示

:root {
  --custom-bg: '#97fb1';
}

将 ?_raw=custom-bg 添加到 URL 会生成此内容

:root {
  --custom-bg: #97fb1;
}

然后可以将其用作颜色值，如下所示

h1 {
    background-color: var(--custom-bg);
}

要在本地设置此插件，首先检出代码。然后创建一个新的虚拟环境

cd datasette-css-properties
python3 -mvenv venv
source venv/bin/activate

如果您使用 pipenv，则：

pipenv shell

现在安装依赖项和测试

pip install -e '.[test]'

运行测试

pytest