开始
Stylify是一个库，它使用类似CSS的选择器来按需生成优化的实用优先CSS。 Stylify处理内容（例如文件），找到类选择器并为其生成CSS。然后它做一些优化并生成CSS文件。
为了开始使用Stylify，你所要做的就是安装它并将类似CSS的选择器写入类的属性中。不需要配置。你不需要创建任何CSS文件，添加任何配置或学习任何东西。如果你对CSS稍有了解，你已经知道如何使用Stylify了。
然而，如果你愿意，你可以使用其他功能，如变量、组件、宏和自定义选择器。下面会有更多关于它们的介绍。
Stylify CSS并没有提供任何 “花哨的裤子 “快捷键、颜色主题和预定义的排版。你可能会问为什么，所以这里有一些解释供你参考：
- 快捷方式： 它们很难记住，而且不切实际。是的，使用它们意味着更少的打字和更短的类属性，代价是学习语法（容易忘记）和增加复杂性。
- 颜色调色板： Stylify不提供任何调色板，因为它们在大多数情况下不符合设计需求。当在一个项目上工作时，你也必须从项目设计者那里得到它们，下载的主题或使用一些工具如Material Theme Builder自己生成它们。
- 排版： 和调色板一样。你可以在Stlyify文档中找到一些排版工具和资产和排版片段。
- 总而言之，我们的目标是尽可能地坚持使用原生的CSS语法，而不使用不必要的预定义配置，这些配置实际上是无用的，而且价值过高。
安装
Stylify可以和任何工具一起工作。对于其中一些工具，它有自己的集成。如果你还没有找到你喜欢的，请告诉我们。
快速入门
最简单的方法是在下面的编辑器中玩，或者复制例子并在Codepen Playground中测试它。
语法与CSS的property:value类似，但有一些不同：
- 使用
_（一个下划线）表示空格，使用^（一个帽子）表示引号。 - 要保留下划线或帽子字符，使用“（一个反斜杠）=>
_。 - 对于供应商的前缀
-webkit，-moz，不要在开头添加-（一个连字符）。 - 默认的语法模式是
<屏幕>:<伪类>:<属性>:<值>。屏幕和伪类是可选的
color:blue => 蓝色
hover:color:blue => 悬停后的蓝色
lg:color:blue => 选定屏幕的蓝色
lg:hover:color:blue => 从选定屏幕悬停后的蓝色
webkit-font-smoothing:antialiased当很多属性在同一个屏幕或伪类中重复出现时，你可以像下面的例子那样将它们分组。语法是 <屏幕>:<伪类>:{stylify选择器由;}分割。
hover:{color:blue;font-weight:bold} # 多个选择器的快捷方式
lg:hover:{color:blue;font-weight:bold} # 同样的，也适用于屏幕<!--
Edit Me 😎!
Write selectors as CSS property:value
Use _ for a space and ^ for a quote
-->
<img src="/images/p1.jpg" class="
height:120px
width:auto
border-radius:4px
transition:.3s
hover:scale:1.1
"><!-- Edit Me 😎! Write selectors as CSS property:value Use _ for a space and ^ for a quote --> <img src="/images/p1.jpg" class=" height:120px width:auto border-radius:4px transition:.3s hover:scale:1.1 ">
.border-radius\:4px{
border-radius: 4px
}
.height\:120px{
height: 120px
}
.hover\:scale\:1\.1:hover{
scale: 1.1
}
.transition\:\.3s{
transition: .3s
}
.width\:auto{
width: auto
}.z{
border-radius: 4px
}
.zp{
height: 120px
}
.zo:hover{
scale: 1.1
}
.dr{
transition: .3s
}
.cw{
width: auto
}<!-- Edit Me 😎! Write selectors as CSS property:value Use _ for a space and ^ for a quote --> <img src="/images/p1.jpg" class=" zp cw z dr zo ">
屏幕的用法
Stylify有预定义的快捷键，如sm、md、lg和动态屏幕，如minw、maxw、rng。动态屏幕很灵活，生成的媒体查询取决于你在使用它们时选择的值。
查看完整列表。所有生成的屏幕都是自动排序。
<div class="font-size:12px minw768px:font-size:32px lg:font-size:24px">
Screens
</div><div class="font-size:12px minw768px:font-size:32px lg:font-size:24px"> Screens </div>
.font-size\:12px{
font-size: 1.2rem;
line-height: 2.04rem
}
@media (min-width: 768px) {
.minw768px\:font-size\:32px{
font-size: 3.2rem;
line-height: 3.84rem
}
}
@media (min-width: 1024px) {
.lg\:font-size\:24px{
font-size: 2.4rem;
line-height: 4.08rem
}
}.bo{
font-size: 1.2rem;
line-height: 2.04rem
}
@media (min-width: 768px) {
.zz{
font-size: 3.2rem;
line-height: 3.84rem
}
}
@media (min-width: 1024px) {
.op{
font-size: 2.4rem;
line-height: 4.08rem
}
}<div class="bo zz op"> Screens </div>
屏幕也可以使用逻辑操作数进行组合： 逻辑和： &&, 逻辑OR： ||
<div class="lg||landscape:color:orange sm&&dark:color:grey lg&&dark:color:white">
Combined screens
</div><div class="lg||landscape:color:orange sm&&dark:color:grey lg&&dark:color:white"> Combined screens </div>
@media (min-width: 1024px), (orientation: landscape) {
.lg\|\|landscape\:color\:orange{
color: orange
}
}
@media (min-width: 640px) and (prefers-color-scheme: dark) {
.sm\&\&dark\:color\:grey{
color: grey
}
}
@media (min-width: 1024px) and (prefers-color-scheme: dark) {
.lg\&\&dark\:color\:white{
color: white
}
}@media (min-width: 1024px), (orientation: landscape) {
.aaa{
color: orange
}
}
@media (min-width: 640px) and (prefers-color-scheme: dark) {
.aab{
color: grey
}
}
@media (min-width: 1024px) and (prefers-color-scheme: dark) {
.aac{
color: white
}
}<div class="aaa aab aac"> Combined screens </div>
如果你想添加一个自定义屏幕，你可以这样做：
const compilerConfig = {
screens: {
'xs': '(min-width: 400px)',
// 屏幕也可以是函数 => 动态屏幕
'customScreen\\w+': (screen) => `(min-width: ${screen.fullMatch.replace('customScreen', '')})`
}
};添加一个变量
在代码中设置硬编码的值并不是一个好的做法。因此你可以定义变量。
变量可以在本地使用时定义在内容中（期望是一个没有括号的对象），或者在全局使用时定义在编译器配置中。
<!--
stylify-variables
height: '120px',
radius: '4px',
scale: '1.1'
/stylify-variables
-->
<img src="/images/p3.jpg" class="
width:auto
transition:.3s
height:$height
border-radius:$radius
hover:scale:$scale
"><!-- stylify-variables height: '120px', radius: '4px', scale: '1.1' /stylify-variables --> <img src="/images/p3.jpg" class=" width:auto transition:.3s height:$height border-radius:$radius hover:scale:$scale ">
:root {
--height: 120px;
--radius: 4px;
--scale: 1.1;
}
.border-radius\:\$radius{
border-radius: var(--radius)
}
.height\:\$height{
height: var(--height)
}
.hover\:scale\:\$scale:hover{
scale: var(--scale)
}
.transition\:\.3s{
transition: .3s
}
.width\:auto{
width: auto
}:root {
--height: 120px;
--radius: 4px;
--scale: 1.1;
}
.zv{
border-radius: var(--radius)
}
.zu{
height: var(--height)
}
.zt:hover{
scale: var(--scale)
}
.dr{
transition: .3s
}
.cw{
width: auto
}<!-- stylify-variables height: '120px', radius: '4px', scale: '1.1' /stylify-variables --> <img src="/images/p3.jpg" class=" cw dr zu zv zt ">
在一个编译器配置中：
const compilerConfig = {
variables: {
fontSize: '24px',
fontSizeLg: '32px',
textShadow: '0 4px 8px #379adf'
}
};CSS变量
Stylify在默认情况下会尽量严格。你可能想设置外部变量，以告知Stylify，有些变量是存在的，但却是外部变量。如果你不想配置所有的变量，你可以完全禁用这个警告。
一个好的做法是，例如加载一个主题的文件内容，用正则表达式来解析内容，以匹配所有可能的CSS变量，并将匹配的名称传入外部变量数组。
你也可以使用一个函数来检查在选择器中使用的变量是否与某些模式相匹配，比如
md-用于Material Theme。如果是这样，它将被匹配为外部变量。这样你就不必解析任何文件和检查名称了。在一个编译器配置中：
const compilerConfig = {
// 设置外部变量
externalVariables: [
// 简单的字符串检查
'some-color',
// 定义回调以指定更灵活的检查。
// 例如，这将标记每一个以md-开头的变量。
// 作为外部变量。
(variable) => variable.startsWith('md-') ? true : undefined
],
// 禁用未定义的变量错误
// 'silent' => 完全停用警告。
// 'warn' => 开发时默认为警告。
// 'error' => 默认用于生产。
undefinedVariableWarningLevel: 'silent'
};定义一个组件
当我们想重复使用一段代码时，例如一个按钮，而不重复使用类，我们可以定义一个组件。当本地使用时（一个文件/几个页面），组件可以被定义在内容中（希望是一个没有括号的对象），当全局使用时，可以定义在编译器配置中。
<!--
stylify-components
'image': `
height:100px
width:auto
border-radius:4px
transition:.3s
margin:0_8px
hover:scale:1.1
`
/stylify-components
-->
<img src="/images/p1.jpg" class="image">
<img src="/images/p2.jpg" class="image"><!-- stylify-components 'image': ` height:100px width:auto border-radius:4px transition:.3s margin:0_8px hover:scale:1.1 ` /stylify-components --> <img src="/images/p1.jpg" class="image"> <img src="/images/p2.jpg" class="image">
.image{
border-radius: 4px
}
.image{
height: 100px
}
.image{
margin: 0 8px
}
.image:hover{
scale: 1.1
}
.image{
transition: .3s
}
.image{
width: auto
}.zq{
border-radius: 4px
}
.zq{
height: 100px
}
.zq{
margin: 0 8px
}
.zq:hover{
scale: 1.1
}
.zq{
transition: .3s
}
.zq{
width: auto
}<!-- stylify-components 'image': ` height:100px width:auto border-radius:4px transition:.3s margin:0_8px hover:scale:1.1 ` /stylify-components --> <img src="/images/p1.jpg" class="zq"> <img src="/images/p2.jpg" class="zq">
在一个编译器配置中：
const compilerConfig = {
components: {
'label-icon': 'lg:font-size:48px margin-left:8px',
label: `
display:flex
line-height:1.2
font-size:32px
align-items:center
`,
}
};添加宏
如果你想为margin-left添加一个更短的变体，比如ml，你可以添加宏，如下面的例子。
const compilerConfig = {
macros: {
'ml:(\\S+?)': (match) => {
// ml:24px => 将创建 => margin-left: 24px
return {'margin-left': match.getCapture(0)}
}
}
};自定义选择器
使用自定义选择器可以对元素进行全局造型。
语法如下 [CSS 选择器]{程式化选择器由 ; （分号}。
&字符总是指的是当前元素，就像在SCSS中一样。
空格用_（下划线），引号用^（帽子）字符。
<!-- 每个<a>都会有蓝色的颜色 -->
<div class="[a]{color:blue}">
<!-- 当光标在链接上时，只有标签会被下划线 -->
<a href="#" class="
hover:text-decoration:none
[&:hover_.label]{text-decoration:underline;font-weight:bold}
">
<span class="icon">+</span>
<span class="label">蓝色链接</span>
</a>
</div>预备组件
你在寻找一些预先安排好的组件吗？我们已经为你准备好了!
材料主题集成指南
如果你正在寻找一些调色板，有一个指南，说明如何使用Material Theme Builder来为你的下一个项目轻松生成Material Theme。
高级配置
查看编译器以获得更多配置选项。编译器配置是可重复使用的，对下面列出的所有包都是一样的。
如果你想在浏览器中直接使用Stylify，你应该查看Runtime文档。
Stylify的CSS包
Stylify提供了多个软件包。所有这些都可以使用NPM或YARN来安装。Stylify CSS和Profiler也可以通过CDN直接使用：
- @stylify/astro - Astro.build的整合模块
- @stylify/stylify - 核心。生成CSS。重写(mangles)选择器
- @stylify/bundler - 用于生成CSS包。
- @stylify/unplugin - Rollup、Webpack、Vite 和 Esbuild 的通用插件。
- @stylify/nuxt - Nuxt.js v3的模块。
- @stylify/nuxt-module - Nuxt.js v2 < v3的模块。
用你喜欢的工具尝试Stylify CSS!
为了更容易地使用你喜欢的工具，请查看集成实例。
