SASS 初步準備（一）

• SASS 入坑（二）

前提

若是你不知道 Node，那麼你須要去簡單學習一下 Node，知道如何用 Node
和 NPM 下載一些工具，官網也有提供基於 Ruby 編寫的 Sass編譯器，但
本系列咱們用的是 node-sass 這個工具來入坑，大多數 node 的編譯工具相似
stlyus less 的命令都是差很少的，除非你從沒敲過，可能歷來都只是在
webpack 這樣的構建工具下用到 css 預編譯。

node-sass 簡單使用

不要糾結爲何是 node-sass 而不是 sass 或者 scss，我也不知道
這一章先學個簡單的工具，下一章開始 sass 的基礎

全局安裝並查看版本

// 全局安裝
npm i node-sass --global
// 安裝完成後，查看安裝是否成功
node-sass -version
複製代碼

基礎用法

// 1 新建一個文件夾 test，test 文件夾中新建一個first.scss 
// （你的第一個sass文件，注意是 .scss 結尾，不要問爲何不是 .sass，我也不知道）
// 2 個人是 Windows 系統，打開 cmd 命令窗口進入這裏
// 3 由於上面咱們全局安裝了 node-sass，這裏咱們第一次來試着編譯 scss 文件

node-sass --output-style expanded first.scss first.css
複製代碼

node-sass 基礎命令

依據咱們上面敲過的 node-sass --output-style expanded first.scss first.css
來作一下基礎的解釋，--ouput-style expanded 的做用是讓咱們編譯後的 css 不
帶有縮進，這裏的縮進是像你寫 嵌套sass 的那種縮進，而 first.scss first.css
就理解爲根據 XYZ.scss 文件生成了 XYZ.css

編譯前 first.scss

$fsColor: #fff;
body {
  color: $fsColor;
  background-color: #fff;
  h1 {
    color: $fsColor;
    background-color: #fff;
  }
}
複製代碼

編譯後 first.css

body {
  color: #fff;
  background-color: #fff;
}

body h1 {
  color: #fff;
  background-color: #fff;
}
複製代碼

題外話

若是不懂 npm 能夠跳過，不影響學習 sass。

用 npm init -y 初始化 package.json

{
  "name": "sass",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compile": "node-sass --watch --output-style expanded"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
複製代碼

而後直接 npm run compile first.scss first.css

命令多了個 --watch 監聽源文件

固然你能夠直接 --watch ./ 文件夾