如何从 Stitches CSS-in-JS 库迁移到 Stylify CSS
这篇指南是为了帮助你快速比较Stitches CSS-in-JS库和Stylify的实用优先CSS的特性和语法，并让你了解如何从Stitches迁移到Stylify。
简介
Stitches是一个CSS-in-JS，具有近乎零的运行时间、SSR、多变量支持，以及一流的开发者体验。
Stylify CSS是一个库，它使用原生的类似于CSS的选择器color:blue, width:640px, margin:0_auto以及变量、组件、自定义选择器来根据你编写的内容动态生成优化的CSS。
选择器和CSS工具
当你想直接给某些元素设置样式时，你可以使用CSS属性：
<Button css={{
borderRadius: '0',
'&:hover': {
backgroundColor: 'black',
color: 'white',
},
}}>Button</Button>
Stylify使用类似CSS的工具，可以直接在class属性中使用。默认情况下没有捷径，选择器不能包含空格，因为要进一步优化:
<div class="
color:blue
font-weight:bold
md:color:red
md&&landscape:font-size:32px
minw123px:font-size:123px
"></div>当一些选择器有相同的伪类甚至是媒体查询时，你可以像这样分组:
<div class="
hover:{color:blue;text-decoration:underline}
md:hover:{transform:scale(1.1);left:4px}
"></div>全局选择器
全局样式可以在Stitches中定义，如下所示：
import { globalCss } from '@stitches/react';
const globalStyles = globalCss({
'*': { margin: 0, padding: 0 },
});
() => {
globalStyles();
return <div ... />
};Stylify提供了自定义选择器，您可以用它来对元素进行全局样式。这些选择器可以直接在类属性中定义，或在全局配置中定义，或在文件中使用内容选项。
使用class属性的例子:
<div class="[.button_.icon]{font-size:14px}">
<button class="
[.icon]{color:#fff;border-radius:12px}
[&+button]{margin-left:24px}
">
<i class="icon"></i>
</button>
<button></button>
<div>类属性中的语法模式看起来像这样:
[css selectors]{stylify selectors split by ;}在CSS和Stylify的选择器中，_（下划线）被用来代替空格，&字符总是指的是当前元素。
同样的代码，但在全局配置中会是这样的:
const compilerConfig = {
customSelectors: {
'.buttons-wrapper .button .icon': 'font-size:14px',
'.button': `
.icon { color:#fff border-radius:12px }
& + button { margin-left:24px }
`,
}
}当在全局配置中通过内容选项定义`customSelectors`时，该语法让你使用嵌套功能。&字符指的是像SCSS中的上层。
全局配置的用法:
<div class="buttons-wrapper">
<button class="button">
<i class="icon"></i>
</button>
<button></button>
<div>组件
Stitches允许你以这种方式定义组件：
import { styled } from '@stitches/react';
const Button = styled('button', {
backgroundColor: 'gainsboro',
borderRadius: '9999px',
fontSize: '13px',
padding: '10px 15px',
'&:hover': {
backgroundColor: 'lightgray',
},
});Stylify默认没有提供任何预定义的CSS组件。但是，它提供了两种方法来定义它们，并且有一套复制和粘贴的无头组件，您可以在您的项目中使用。
组件可以在文件（使用内容选项）中配置，在使用它们的地方，或者在$projectConfig中全局配置。
以文件内的配置为例。stylify-components之间的内容期待没有周围括号的javascript对象:
<!--
stylify-components
title: 'color:blue font-weight:bold md:color:red'
/stylify-components
-->
<h1 class="title"></h1>全局编译器配置中的例子:
const compilerConfig = {
components: {
title: 'color:blue font-weight:bold md:color:red'
}
};使用方法:
<h1 class="title"></h1>当定义组件时，你也可以像在SCSS中那样使用嵌套语法。这在全局配置和内容选项中都适用。:
const compilerConfig = {
components: {
button: `
color:black font-weight:bold
&:hover { color:grey }
&--red {
color:red
&:hover { color: darkred }
}
`
}
};配置、定制和变量
Stitches可以在应用程序的任何地方进行技术配置。 你可以创建一个新的Stitches实例，并在你需要的任何地方重新使用它。
全局配置的例子：
export const { styled, css } = createStitches({
theme: {
colors: {
gray500: 'hsl(206,10%,76%)',
},
space: {
1: '5px',
},
fontSizes: {
1: '12px',
},
fonts: {
mono: 'Söhne Mono, menlo, monospace',
},
// ...
}
});本地配置示例：
const { styled } = createStitches({
theme: {
colors: {
violet800: 'hsl(252 62% 54.9%)',
},
},
});
const Button = styled('button', {
backgroundColor: '$violet800',
});在Stylify中，没有类似 "主题 "的东西，也没有$projectConfig中的扩展部分。只有变量。
变量在Stylify中可以通过两种方式定义。在全局配置中或在一个文件中，通过内容选项使用。
全局配置的例子:
const compilerConfig = {
variables: {
primary: '#000',
secondary: '#eee',
titleFontSize: '24px',
shadow: '0 2px 3px #000'
}
}变量也可以根据媒体查询来定义:
const compilerConfig = {
variables: {
dark: { blue: 'lightblue' },
md: { fontSize: 24px },
'minw640px': { fontSize: 32px },
// When screen is not found, it falls back to a random custom selector
'.dark': { blue: 'lightblue' },
':root[data-theme="dark"]': { blue: 'lightblue' }
}
}使用内容选项的例子:
<!--
stylify-variables
primary: '#000',
secondary: '#eee'
titleFontSize: '24px',
shadow: '0 2px 3px #000'
/stylify-variables
-->
<div class="color:$primary"></div>当你需要使用道具将颜色传递给组件时，可以使用本地的CSS变量:
<div
style={{ '--localTextColor': props.textColor }}
className="title color:$localTextColor"
">
</div>我们只需要告诉Stylify用CSS变量来代替变量的值，并告诉他localTextColor是外部变量。:
const compilerConfig = {
externalVariables: ['localTextColor']
}外部变量也可以只在使用它的文件中定义:
<!--
stylify-externalVariables
localTextColor
/stylify-externalVariables
-->
<div
style={{ '--localTextColor': props.textColor }}
className="title color:$localTextColor"
">
</div>
