2022年2月12日

用Stylify CSS为你的Nuxt.js更快速地设计风格

使用类似于Stylify CSS的工具,可以更快地为你的Nuxt.js网站设计风格。



使用Stylify类似于CSS的工具,快速而轻松地给你的Nuxt.JS应用程序定型,避免学习框架或使用标签之间的切换。

##介绍

Stylify是一个库,它使用类似于CSS的选择器,根据你写的内容生成优化的实用优先的CSS。

  • ✅ 类似CSS的选择器
  • ✅ 不需要研究框架
  • ✅ 花在文档上的时间更少
  • ✅ 纠结&极小的CSS
  • ✅ 不需要清除CSS
  • ✅ 组件、变量、自定义选择器
  • ✅ 它可以生成多个CSS捆绑包

我们也有一个关于Stylify CSS解决了什么问题,以及为什么你应该尝试一下!

安装

为了更容易入门,你可以查看Stylify Stackblitz playground 🎮。

Stylify提供了@stylify/nuxt-module,将整合过程简化到最小:

对于Nuxt v3

yarn add @stylify/nuxt

对于Nuxt v2

yarn add @stylify/nuxt-module

当Stylify CSS安装完毕后,在nuxt.config.js中的buildModules部分加入Nuxt模块。

buildModules: [
	// 对于Nuxt v3
	'@stylify/nuxt'
	// 适用于Nuxt v2
	'@stylify/nuxt-module'
]

就这样了。现在你可以开始使用Stylify来设计你的Nuxt.js应用程序🤩。

第一个CSS

打开pages/index.vue目录,复制以下内容到其中。

<template>
	<div class="max-width:1024px margin:0_auto">
		<h1 class="font-size:24px lg:font-size:32px text-align:center">
			你好,世界🥳!
		</h1>
	</div>
</template>

恭喜你,你已经完成了你的第一个页面的样式设计!

清理和配置

当实用优先的方法中选择器的数量开始增加时,它可能会变成一个巨大的、不可读的混乱,当后台工程师看到它时,他们会日夜哭泣。

因此,我们有了组件。组件可以在三个地方被定义:

  • 在使用它们的文件中
  • stylify.config.js文件中
  • 在Stylify部分的nuxt.config.js

让我们在index.vue中定义标题组件,因为它只在这里使用。

<!--
stylify-components
	title: `
		font-size:24px lg:font-size:32px
		text-align:center
	`
/stylify-components
-->
<template>
	<div class="container">
		<h1 class="title">你好,世界 🥳!</h1>
	</div>
</template>

现在,让我们在stylify.config.js中添加一个容器组件,因为它可能要在整个项目中使用。

创建stylify.config.js

export default {
	compiler: {
		components: {
			container: 'max-width:1024px margin:0_auto',
		}
	}
};

有时,有必要对元素进行全局样式化。这可以用自定义选择器来完成:

export default {
	compiler: {
		// ...
		customSelectors: {
			'*': 'font-family:arial font-size:16px'
		}
	}
};

变量几乎在每段代码中都会用到。在CSS中也不例外。所以让我们添加一个变量:

export default {
	compiler: {
		// ...
		variables: {
			'titleColor': 'steelblue'
		}
	}
};

现在我们可以在整个项目的选择器中使用这个变量:

<!--
stylify-components
	"title": "color:$titleColor ..."
/stylify-components
-->

结果

Stylify在assets目录下生成了stylify.css。该CSS尽可能地重复使用每个选择器,以避免重复的`properties:values’

混合的HTML

<div class="a">
	<h1 class="b">你好,世界 🥳!</h1>
</div>

生成的CSS

:root {--titleColor: steelblue;}
*,.font-family\:arial{ font-family:arial }
*, .font-size\:16px{ font-size:16px }
.max-width\:1024px, .container{ max-width:1024px }
.margin\:0_auto, .container{ margin:0 auto }
.color\:\$titleColor,
.title{ color:steelblue }
.font-size\:24px, .title{ font-size:24px }
.text-align\:center, .title{ text-align:center }

@media (min-width: 1024px) {
.lg\:font-size\:32px,.title{ font-size:32px }
}

混合的CSS

:root { --titleColor: steelblue; }*,
.c { font-family: arial }
*, .d { font-size: 16px }
.e,.a { max-width: 1024px }
.f,.a { margin: 0 auto }
.g,.b { color: steelblue }
.h,.b { font-size: 24px }
.i,.b { text-align: center }

@media (min-width: 1024px) {
.j,.b {font-size: 32px}
}

配置任何你需要的东西

上面的例子并不包括Stylify CSS能做的一切:

请随时查看文档以了解更多信息 💎。

给予反馈!
你喜欢Stylify CSS吗?让我们知道,请在我们的repo上签名