如何从Pure CSS框架迁移到Stylify CSS
这篇指南是为了帮助你快速比较Pure CSS组件框架和Stylify的实用优先CSS的特性和语法，并让你了解如何从Pure CSS迁移到Stylify。
简介
Pure CSS是一套小型的、响应式的CSS模块，你可以在每个网页项目中使用。
Stylify CSS是一个库，它使用原生的类似于CSS的选择器color:blue, width:640px, margin:0_auto以及变量、组件、自定义选择器来根据你编写的内容动态生成优化的CSS。
选择器和CSS工具
Pure CSS为网格等属性提供了实用工具：
<div class="pure-g">
<div class="pure-u-1-3"><p>三分之一</p></div>
<div class="pure-u-1-3"><p>三分之一</p></div>
<div class="pure-u-1-3"><p>三分之一</p></div>
</div>
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>全局选择器
我没有找到任何信息表明Pure CSS提供了类似动态全局选择器的东西。
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>组件
Pure CSS是一个框架，它提供了一些基本组件，如按钮、表单、表格、菜单等：
<a class="pure-button" href="#">一个纯按钮</a>。
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>品牌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
</table>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 }
}
`
}
};配置、定制和变量
Pure CSS可以通过扩展现有的类来进行配置：
/*在这个选择器中添加你的自定义样式 */
.form-custom { ... }<form class="form-custom pure-form"></form>你也可以通过选择响应式和非响应式的Rollup来选择你要导入的组件。你可以在他们的网站上找到更多信息。
在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>
