sass编译
Sass可能是CSS预处理器中最受欢迎的一种。 多年来,它帮助我们编写了干净,可重用和模块化CSS。 在本快速教程中,我将直接介绍重要的内容,并说明如何使用命令行将Sass编译为CSS。
1.安装Node.js
要通过命令行编译Sass,首先我们需要安装node.js。 从官方网站nodejs.org下载它,打开软件包并按照向导进行操作。
2.初始化NPM
NPM是JavaScript的Node Package Manager。 NPM使安装和卸载第三方软件包变得容易。 要使用NPM初始化Sass项目,请打开终端和CD(更改目录)到项目文件夹。
进入正确的文件夹后,运行命令npm init
。 系统将提示您回答有关该项目的几个问题,然后NPM将在您的文件夹中生成package.json
文件。
3.安装Node-Sass
Node-sass是一个NPM软件包,可将Sass编译为CSS(它也非常快地完成)。 要安装node-sass,请在终端中运行以下命令: npm install node-sass
4.编写Node-sass命令
一切准备就绪,可以编写一个小的脚本来编译Sass。 在代码编辑器中打开package.json文件。 您将看到如下内容:
{
"name": "sass-tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
脚本中的部分添加SCSS命令, 测试命令下,因为它的显示如下:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "node-sass --watch scss -o css"
}
让我们逐字逐句地进行浏览。
-
node-sass
:指代node-sass软件包。 -
--watch
:一个可选的标志,它的意思是“看在SCSS /文件夹中的所有文件.scss并重新编译他们每有一个变化的时间。” -
scss
:我们放置所有scss
文件的文件夹名称。 -
-o css
:已编译CSS的输出文件夹。
当我们运行这个脚本会观看每.scss
在文件scss/
文件夹,然后保存在编译CSS css/
文件夹,每次我们改变.scss
文件。
5.运行脚本
要执行单行脚本,我们需要在终端中运行以下命令: npm run scss
瞧! 我们正在监视和编译SASS。
Sass快速提示
请继续关注更多Sass快速提示; 途中有一个完整的收藏!
翻译自: https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275
sass编译