用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能做的一切：
请随时查看文档以了解更多信息 💎。
