前言
在前端开发中，CSS 是不可或缺的一部分。在实际开发中，我们经常会遇到需要快速生成 CSS 样式的场景，这时候一个好用的 CSS 工具会大大提高开发效率。其中，npm 包 shortcss 就是一款非常实用的 CSS 工具，它能够帮助我们快速生成类似于 Tailwind CSS 的样式。
shortcss 是什么？
shortcss 是一个 CSS 样式库，它提供了很多常用的样式，比如 margin、padding、font-size 等，通过简单的类名即可快速生成相应的样式。同时，shortcss 也提供了一些有趣且实用的样式，比如 rainbow、scroll、blink 等，可以为页面增加更多的动态元素。
安装 shortcss
安装 shortcss 的方法非常简单，只需要在命令行中执行以下命令即可：
npm install shortcss --save-dev
shortcss 的使用
在安装完 shortcss 后，我们就可以在 HTML 页面中使用它提供的样式类了。
-- -------------------- ---- ------- ---- -- ------------ --- ----- ---------------- ------------------------------------------------- ---- -- ------ - ------- -- --- ---- ----------- ---------- --------------- ---- -- --------- -- --- ---- ---------------------- --------------- ---- -- ------- -- --- ---- --------------------- --------------- ---- -- ------ -- --- ---- -------------------- --------------- ---- -- ----- -- --- ---- ------------------- ---------------
我们来解释一下上面的代码，可以看到我们先在HTML中引入了 shortcss.css 文件，然后在代码中分别使用了 margin、padding、font-size、rainbow、scroll、blink 等样式类。这里需要注意的一点是，shortcss 的样式类都是以单个字母为前缀，比如 m 表示 margin、p 表示 padding、text-2xl 表示 font-size。这样的命名方式可以帮助我们快速记忆和使用样式类。
另外，shortcss 还提供了一些快速设置背景颜色、字体颜色、边框样式等的工具类，这些类名同样是单个字母开头的，具体可以查看官方文档。
可配置选项
shortcss 提供了一些可配置选项，我们可以在安装时通过参数来配置自己需要的选项。
npm install shortcss --save-dev --production=false --colors="red,green,blue,pink,gray"
上面的命令中，我们通过 --production=false 参数将 shortcss 的文件体积打开了开发模式，方便我们调试和查看代码。同时，通过 --colors="red,green,blue,pink,gray" 参数，我们可以指定自己喜欢的颜色数组，用于 rainbow 样式的生成。
总结
shortcss 是一款非常实用的 CSS 工具，它为我们的前端开发提供了非常方便快捷的方式来生成 CSS 样式。在使用时，需要注意其命名方式，方便记忆和使用。此外，shortcss 也提供了一些可配置选项，可以根据自己的需求进行设置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb1afb5cbfe1ea061110e