阅读 180

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 新建一个文件夹 testtest 文件夹中新建一个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 ./ 文件夹

关注下面的标签,发现更多相似文章
评论