如何从Foundation CSS框架迁移到Stylify CSS

这篇指南是为了帮助你快速比较Foundation组件框架和Stylify实用至上的CSS的特性和语法,并让你了解如何从Foundation迁移到Stylify。

如果您发现任何不正确或遗漏的信息,请联系<a href="mailto:dev@stylifyccss.com">dev@stylifycss.com</a>或在Github上编辑此页面。

简介

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>

将Stylify整合到您最喜爱的工具中

Stylify可以在各种工具中使用。挑选你喜欢的工具,在一分钟内开始使用Stylify CSS。

开始吧

用准备好的无头的CSS组件加快开发速度

复制&粘贴,无风格的组件,灵感来自于Material Design V3。