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

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

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

简介

Materialize是一个基于Material Design的现代响应式前端框架。

Stylify CSS是一个库,它使用原生的类似于CSS的选择器color:blue, width:640px, margin:0_auto以及变量组件自定义选择器来根据你编写的内容动态生成优化的CSS。

选择器和CSS工具

Materialize为颜色、排版、网格等属性提供了很多实用工具:

<span class="blue-text text-darken-2">这是一个带有深蓝色文字的卡片面板</span>
<div class="row">
	<div class="col s1">1</div>
	<div class="col s1">2</div>
</div>
<p class="flow-text">我是流动文本</p>

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>

全局选择器

我找不到任何信息表明Materialize提供了类似动态全局选择器的东西。

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>

组件

Materialize是一个基于组件的框架。因此,有大量的组件,如按钮、徽章、表单、表格、菜单等:

<span class="badge">1</span>
<a class="btn-floating btn-large waves-effect waves-light red">
	<i class="material-icons">add</i>
</a>
<ul class="pagination">
	<li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
	<li class="active"><a href="#!">1</a></li>
	<li class="waves-effect"><a href="#!">2</a></li>
	<li class="waves-effect"><a href="#!">3</a></li>
	<li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></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 }
			}
		`
	}
};

配置、定制和变量

Materialize CSS可以通过修改下载的SCSS文件和在构建过程中生成一个新的主题来进行配置。

在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。