简介
在前端开发中，CSS 样式是一个不可避免的话题。但是，手写 CSS 样式往往会让开发者头痛不已，尤其是在处理复杂样式布局的时候。因此，使用样式生成器可以大大提高开发效率和可维护性。
@savvy-css/generator-savvy-css 是一款基于 Node.js 的 CSS 样式生成器。它提供了一系列常用的 CSS 样式，例如：网格布局、响应式布局、居中布局、flexbox 布局等，并且可以定制化生成 CSS 样式，让开发者可以更加自由地配置样式。
本文将介绍如何使用 @savvy-css/generator-savvy-css。
准备工作
在使用 @savvy-css/generator-savvy-css 之前，需要先安装 Node.js。
安装
可以通过 npm 来安装。
npm install -g yo generator-savvy-css
使用
生成样式
在终端中运行以下命令：
yo @savvy-css/savvy-css
这时，会询问一些问题，例如：需要生成哪些布局、需要生成哪些配色方式等等。回答完所有问题后，样式就会生成。
自定义样式
如果需要对样式进行一些自定义修改，可以在样式文件中进行修改。样式文件位于 src/styles/ 目录下。
样式文件结构如下：
src/styles/ ├── _config.scss ├── _layout.scss ├── _colors.scss └── main.scss
其中，
_config.scss文件是配置文件，用于定义布局和颜色配置等。_layout.scss文件是布局文件，包含了网格布局、响应式布局、居中布局、flexbox 布局等。_colors.scss文件是颜色文件，用于定义配色方式。main.scss文件是入口文件，包含了样式文件的引入。
编译样式
使用以下命令来编译样式：
npm run build
这时，会在 dist/ 目录下生成编译后的样式文件。
总结
使用 @savvy-css/generator-savvy-css 可以快速生成常用的 CSS 样式，提高开发效率和代码可维护性。同时，对样式进行自定义配置也非常方便。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea581e8991b448dc0aa