如何从Foundation CSS框架迁移到Stylify CSS
这篇指南是为了帮助你快速比较Foundation组件框架和Stylify实用至上的CSS的特性和语法，并让你了解如何从Foundation迁移到Stylify。
简介
Foundation是一个适用于任何设备、媒介和可访问性的框架。Foundation是一个响应式的前端框架系列，它可以轻松地设计出漂亮的响应式网站、应用程序和电子邮件，在任何设备上看起来都非常棒。
Stylify CSS是一个库，它使用原生的类似于CSS的选择器color:blue, width:640px, margin:0_auto以及变量、组件、自定义选择器来根据你编写的内容动态生成优化的CSS。
选择器和CSS工具
Foundation Sited提供了一些实用工具，如阴影、弹性框、可见性等属性：
<div class="float-left shadow show-for-medium">Left</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>全局选择器
我没有找到任何信息表明Foundation提供了类似动态全局选择器的东西。
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>组件
Foundation是一个基于组件的框架。因此，有大量的组件，如按钮、徽章、表单、表格、菜单等：
<span class="badge primary">1</span>
<a role="button" class="button radius primary">1</a>
<ul class="menu">
<li><a href="#">一</a></li>
<li><a href="#">二</a></li>
</ul>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 }
}
`
}
};配置、定制和变量
Foundation网站可以在SCSS文件中进行配置。如果你直接从他们的网站下载了Foundation，你可以在_settings.scss文件中进行配置，否则，你必须覆盖导入的变量：
$foundation-palette: (
"primary": #1779ba,
"secondary": #767676,
"success": #3adb76,
"warning": #ffae00,
"alert": #cc4b37,
);在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>
