npm 包 justscss 使用教程

前言

在前端开发中，CSS 是必不可少的一部分。但是，CSS 写起来往往困难重重，而且充满了重复的代码和样式，导致维护难度上升。这就是为什么 CSS 预处理器被广泛使用的原因之一。其中一种备受欢迎的预处理器就是 Sass。 Sass 可以将 CSS 变得更易于维护、更优雅。但是，使用 Sass 改变了我们编写样式表的方式，导致我们可能需要用到一些新的工具来自动编译 Sass，以便将它们转换为常规的 CSS。 在本文中，我们将介绍一个名为 justscss 的 npm 包，它让你可以更轻松地将 Sass 编译成标准的 CSS。

什么是 justscss？

justscss 是一个适用于 Sass 和 SCSS 的纯 JavaScript CSS 预处理器。它可以在项目中帮助你自动生成 CSS 文件，不需要使用大型 Sass 编译器，只需几个简单的命令既可完成。

安装 justscss

安装 justscss 可以通过 npm 安装：

npm install justscss

如何使用 justscss？

1. 创建如下结构的文件夹：

   ├── src/                 - 存放 SCSS 文件
   │   └── styles.scss     - SCSS 文件
   ├── dist/                - 存放编译后的 CSS 文件
   │   └── styles.css      - 编译后的 CSS 文件
   ├── package.json         - npm 包初始化文件
   └── index.html           - HTML 文件

2. 在项目中使用：

   在 package.json 文件中添加以下脚本

   "scripts": {
      "build:sass": "justscss src/styles.scss dist/styles.css"
   }

   执行

   npm run build:sass

3. 更多使用方法

   忽略警告：

   "scripts": {
       "build:sass": "justscss src/styles.scss dist/styles.css --quiet"
   }

   生成压缩的 CSS 文件：

   "scripts": {
    "build:sass": "justscss --compress src/styles.scss dist/styles.min.css"
   }

总结

只需几步和几个命令，就可以使用颜色变量、混合和嵌套等 Sass 功能紧凑、优雅的 CSS。justscss 让 Sass 无需繁琐的安装，让你轻松预处理 CSS。使用 justscss，可以大大节省开发时间，提高生产效率，让前端开发更容易。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ef94c49986ca68d8757