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 ./ 文件夹