5步快速实现用 npm 编译 Sass

Sass 可能是最受欢迎的 CSS 预处理器,多年来,它帮助我们编写了干净,可重用和模块化的 CSS。由于我大部分工作是 .NET (Core) 开发,对 sass 了解不深,本文作为学习笔记,主要记录如何使用 npm 命令行,将 *.scss 文件编译成 CSS,通过 5 个步骤快速实现。

首先,由于 Scss 和 Sass 很容易弄混,这里简单区别一下。

  • Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,通过使用命令行的工具或 Web 框架插件把它转换成标准的、格式良好的 CSS 代码。
  • Scss 是 Sassy CSS 的简写,Sass3 引入的新语法,也是 CSS3 语法的超集,有效的 CSS3 样式也同样适合于 Sass,说白了 Scss 就是 Sass 的升级版。
  • Sass 和 Scss 其实就是同一种东西,我们平时都称之为 Sass,两者之间主要是后缀名和语法的区别。

1、安装 Node.js

要通过命令行编译 Sass,首先需要安装 node.js。从官方网站 nodejs.org 下载,打开安装包并按照向导进行操作。

2、初始化 NPM

NPM 是 JavaScript 的节点包管理器。 NPM 可以轻松安装和卸载第三方软件包。因网络环境原因被坑过,对于中国大陆网络建议安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

新建空文件夹打开 cmd 终端并 cd(更改目录)到该文件夹:

切换到Sass目录
切换到Sass目录

进入正确的文件夹后,运行命令npm init。 系统将提示您回答有关该项目的几个问题,之后 NPM 将在文件夹中生成package.json文件,如下图示:

NPM初始化示例
NPM初始化示例

初始化完成后,package.json 的文件, 里面记录的内容是刚刚填写的。

3、安装 Node-Sass

Node-Sass 是一个 NPM 包,可以将 Sass 编译为 CSS。要安装 node-sass,则在终端中的项目文件夹下运行以下命令:

cnpm install --save-dev node-sass

这里说明一下,–save-dev自动将 node-sass 加入到项目文件夹下的package.json中,安装完成后如下图示:

安装node-sass
安装 node-sass

4、配置 Node-Sass 命令

在代码编辑器中打开package.json文件。 你会看到以下配置信息:

{
 "name": "sass-demo",
 "version": "1.0.0",
 "description": "sass compile demo",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [
   "sass"
 ],
 "author": "pzy",
 "license": "ISC",
 "devDependencies": {
   "node-sass": "^4.11.0"
 }
}

scripts 部分中,在 test 命令下添加一个 scss 命令,如下所示:

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "sass": "node-sass"
 },

5、编译 Scss 文件

新建 index-demo.scss 文件,键入内容,然后输入命令编译:

npm run scss index-demo.scss index.demo.css

编译成功,项目文件夹生成文件 index.demo.css,命令行示例图如下:

编译scss示例
编译scss示例

如果想生成压缩 css 文件,可在命令行后面加上--style compressed,但是目前并没有压缩成功,不知道是什么原因。如果要编译多个 .scss 文件,可参考例如使用npm run sass scss css,将文件夹 scss/ 下所有 .scss 文件编译成 .css 文件,然后保存在 css/ 文件夹中。

全文完,参考资料:

Scss 和 Sass 区别:http://yunkus.com/difference-between-scss-sass/

NPM 编译 Scss:https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275

《5步快速实现用 npm 编译 Sass》的相关评论

发表评论

必填项已用 * 标记,邮箱地址不会被公开。