gcss

用纯 Go 编写的 CSS。

动机

这其实只是一种有趣的尝试，看看能否用 Go 来编写 CSS，以及它会是什么样子。我想找到一种方法，可以从服务器端轻松控制 CSS，而不必担心预构建 CSS 来处理变量等问题。我不想使用为 JS 框架编写的 UI 库，也不想使用会给构建过程增加更多步骤的预处理器或 linter。

我可以直接使用 CSS 吗？当然可以，而且我会这样做，但我想看看是否可以用 Go 编写 CSS，因为它正在编译项目的其余部分。

地鼠

它看起来一点也不像 Go 的地鼠，但它是一只地鼠，我喜欢它。这是我在不放弃的情况下从 LM 得到的最好结果，ideogram.ai (1400097641)。

下一步

这个项目的下一步是为 CSS 包添加更多功能。这包括在需要时添加对更多 CSS 属性的支持。我不想添加对所有 CSS 功能的支持，因为有些东西在 CSS 中更好，但我确实想能够创建一些可以使用 Go 配置的 UI 组件。

安装

go get github.com/AccentDesign/gcss

快速开始

这里有一个包含完整示例的独立仓库在此，它会随时间不断发展。

git clone https://github.com/AccentDesign/gcss-starter.git

安装依赖：

# 用于热重载
go install github.com/cosmtrek/air@latest

go mod tidy

运行服务器：

air

使用方法

基本用法

gcss 定义了一个 Style 类型，可用于保存特定 CSS 选择器的属性，例如：

style := gcss.Style{
    Selector: "body",
    Props: gcss.Props{
        BackgroundColor: props.ColorRGBA(0, 0, 0, 128),
    },
}

Style 的 CSS 函数用于将样式写入 io.Writer：

style.CSS(os.Stdout)

这会给你：

body{background-color:rgba(0,0,0,0.50);}

就是这么简单。但你可能会说，单独使用它并不是很有用。

多个样式

那么你可以使用它来定义一个 Styles 类型，用于保存多个 Style 类型：

type Styles []gcss.Style

func (s Styles) CSS(w io.Writer) error {
    // 处理你的错误
    for _, style := range s {
        style.CSS(w)
    }
    return nil
}

styles := Styles{
    {
        Selector: "body",
        Props: gcss.Props{
            BackgroundColor: props.ColorRGBA(0, 0, 0, 128),
        },
    },
    {
        Selector: "main",
        Props: gcss.Props{
            Padding: props.UnitRem(8.5),
        },
    },
}

styles.CSS(os.Stdout)

这会给你：

/* 为了可读性进行了格式化 */
body{
    background-color:rgba(0,0,0,0.50);
}
main{
    padding:8.500rem;
}

需要更多？比如暗色和亮色主题？记住上一个例子，继续往下看。

定义一个 Theme 类型，用于保存特定主题的属性，例如：

type Theme struct {
    MediaQuery string
    Background props.Color
}
func (t *Theme) CSS(w io.Writer) error {
    // 处理错误
    fmt.Fprintf(w, "%s{", t.MediaQuery)
    for _, style := range t.Styles() {
        style.CSS(w)
    }
    fmt.Fprint(w, "}")
}

// Styles 返回主题的样式。
// 可以是任意数量的样式和任意数量的函数
// 你只需要在 CSS 函数中遍历它们。
func (t *Theme) Styles() Styles {
    return Styles{
        {
            Selector: "body",
            Props: gcss.Props{
                BackgroundColor: t.Background,
            },
        },
    }
}

然后你可以定义一个 `Stylesheet` 类型，用于保存多个 `Theme` 类型：

type Stylesheet struct {
    Dark  *Theme
    Light *Theme
}

func (s *Stylesheet) CSS(w io.Writer) error {
    // 处理错误
    s.Dark.CSS(w)
    s.Light.CSS(w)
    return nil
}

最后，你可以使用 `Stylesheet` 类型将 css 写入 `io.Writer`：

styles := Stylesheet{
    Dark: &Theme{
        MediaQuery: "@media (prefers-color-scheme: dark)",
        Background: props.ColorRGBA(0, 0, 0, 255),
    },
    Light: &Theme{
        MediaQuery: "@media (prefers-color-scheme: light)",
        Background: props.ColorRGBA(255, 255, 255, 255),
    },
}

styles.CSS(os.Stdout)

生成结果如下：

@media (prefers-color-scheme: dark) {
    body{
        background-color:rgba(0,0,0,1.00);
    }
}
@media (prefers-color-scheme: light) {
    body{
        background-color:rgba(255,255,255,1.00);
    }
}

希望这能帮助你开始。接下来就看你的了。

* 也许创建一个接受 `props.Color` 并返回 Style 的按钮函数。
* 或者向 `Stylesheet` 添加额外的 `Styles` 以包含非主题样式。
* 一切都取决于你如何构造 `Stylesheet` 并使用 `gcss.Style` 类型。
* 如果我能创建一个适用于所有用例的 `Stylesheet` 类型，我会这么做，但可能性太多了，所以我把它留给你。

优点

* 从服务器端完全控制 CSS。
* CSS 没有混入（mixins），但你可以创建一个返回 `Style` 类型的函数并重复使用它。
* 保持 css 中没有变量。
* 保持 html 中没有像 `bg-gray-50 text-black dark:bg-slate-800 dark:text-white` 这样的类，并消除了记住添加暗色变体的需要。
* 我最近在一个 html 页面上看到一个按钮组件重复了 10 次，每次在 class 属性中超过 1800 个字符。这是不可维护也不可调试的。
* 保持 css 干净，易于调试，没有像上面那样的覆盖。

示例

有关使用示例，请参见 [examples](./examples) 目录，其中包括：

* [完整示例](./examples/full) - 包括基础、媒体和主题样式的完整示例，使用 `sync.Mutex` 在 `http.HandleFunc` 中缓存 css。
* [CSS 重置](./examples/css-resets) - 一个简单的 css 重置集合示例。
* [Templ 集成](./examples/integration-templ) - 一个如何使用 [templ](https://templ.guide) 包加载 gcss 样式的示例。
* [媒体查询](./examples/media-queries) - 一个如何使用媒体查询的示例。
* [模板函数](./examples/template-function) - 一个如何通过 `template.FuncMap` 和 `template.CSS` 直接将 css 写入模板的示例。
* [写入文件](./examples/to-file) - 一个如何写入文件的示例。
* [写入 HTTP 处理程序](./examples/to-http-handler) - 一个如何写入 http 处理程序的示例。
* [写入标准输出](./examples/to-stdout) - 一个如何写入标准输出的示例。

贡献

如果你想为这个项目做出贡献，请开一个 issue 或提交一个 pull request。我们欢迎所有的贡献和想法。

与其他 CSS 框架混合使用

你可以将 `gcss` 与其他 CSS 框架（如 `tailwindcss`）混合使用，例如：

将 css 文件分为基础和实用工具：

/* base.css */
@tailwind base;

/* utils.css */
@tailwind utilities;

然后在 html 中间添加 `gcss` 样式：

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="gcss-styles.css">
<link rel="stylesheet" href="utils.css">
尽量通过使用单一类名来保持`gcss`样式的特异性为1，这样可以确保在需要时`tailwindcss`的工具类能够覆盖你的样式。