2022年12月3日
用Stylify CSS更快编写你的Astro.build网站代码
用Stylify CSS更快地编码你的Astro.build网站。使用类似CSS的实用工具。不要研究CSS框架。
使用Stylify CSS类似于CSS的工具，可以快速、轻松地给你的Astro.build网站定型。
＃＃介绍
Stylify是一个库，它使用类似于CSS的选择器，根据你所写的内容生成优化的实用优先的CSS。
- ✅ 类似CSS的选择器
- ✅ 不需要研究框架
- ✅ 花在文档上的时间更少
- ✅ 纠结&极小的CSS
- ✅ 不需要清除CSS
- ✅ 组件、变量、自定义选择器
- ✅ 它可以生成多个CSS捆绑包
我们也有一个关于Stylify CSS解决了什么问题，以及为什么你应该尝试一下！
安装
使用CLI安装Stylify：
yarn add @stylify/astro在astro.config.mjs中添加一个buildModule：
import { defineConfig } from 'astro/config';
import stylify from '@stylify/astro';
export default defineConfig({
integrations: [stylify()]
});用法
Stylify的语法与CSS相似。你只需要写_而不是空格，^而不是引号。
因此，如果我们编辑src/pages/index.astro：
<h1 class="font-size:24px margin:12px_24px">
你好，世界!
</h1>在生产中，你将得到优化的CSS和纠结的HTML：
<h1 class="a b">你好，世界! </h1>.a{font-size: 24px}
.b{margin: 12px 24px}Stackblitz Playground
继续尝试Stylify CSS + Astro.build on Stackblitz。
配置
上面的例子并不包括Stylify能做的一切：
请随时查看文档以了解更多信息 💎。
