node-sass開發(fā)環(huán)境安裝詳細(xì)教程

Sass編譯有很多種方式，如node-sass、sublime插件SASS-Build、編譯軟件koala和前端自動化軟件Gulp打造前端自動化工作流等。為了方便地實(shí)現(xiàn).scss文件的編譯。下面主要講解如何使用node-sass編譯.scss文件。

? 1. Node.js環(huán)境

在編譯.scss之前，我們首先需要準(zhǔn)備編譯的平臺，即Node.js環(huán)境。打開Node.js官方網(wǎng)站，找到Node.js下載地址，進(jìn)行下載即可。

下載完成后，雙擊安裝包進(jìn)行安裝，如圖1所示。

圖1 安裝界面

安裝過程全部使用默認(rèn)值即可。安裝完成后，打開cmd命令行工具，查看Node.js版本信息，如圖2所示。

圖2 查看Node.js版本

? 2. 安裝node-sass

node-sass是一個庫，它將Node.js綁定到LibSass（用C/C++實(shí)現(xiàn)的Sass引擎），能夠以極快的速度將.scss文件編譯為.css，并能通過連接中間件自動編譯。下面為大家講解node-sass的具體安裝步驟。

在將Node.js環(huán)境安裝完成之后，下一步需要安裝node-sass。打開命令行工具，輸入如下命令進(jìn)行安裝。

npm install --global node-sass

? 上述命令中，--global表示全局安裝node-sass。

安裝完成后，在命令行中輸入如下命令，查看node-sass的版本號。

node-sass –v

圖3 查看node-sass版本

以上的內(nèi)容主要講解了Sass的基本概念，以及Node.js的下載和安裝。在準(zhǔn)備好開發(fā)環(huán)境以后，下面就可以編譯.scss樣式文件了。在編譯.scss樣式文件之前，我們需要先學(xué)習(xí)Sass的基礎(chǔ)知識，掌握Sass的語法規(guī)則、變量、嵌套規(guī)則和運(yùn)算符的使用。

jQuery自定義插件開發(fā)實(shí)踐

什么是Sass？Sass的優(yōu)勢有哪些？

Node.JS快速入門：Node.JS下載與安裝教程

傳智教育HTML前端與移動開發(fā)開發(fā)高手班