sass实战演练01 - 外部文件引用和变量

SASS是什么？
目前前端开发中css已经是公认的”前端程序员必须掌握”的知识，最早的css编写都是手工一条条写出来的，工作量大、不利于维护。
而sass的存在使得css开发可以像写代码一样最终生成一个正常的css文件。

我们直接开干
新建一个文件，后缀名为scss（为什么看到有的资料是.sass?）
sass有2种语法：
1.一种是以sass后缀，对代码的排版有着非常严格的要求，而且没有大括号，没有分号
2.一种是以scss后缀，更接近我们程序写法，比如大括号，分号
sass是ruby写的，但你并不需要懂ruby，另外理论上需要安装ruby（但是我们现在有了nodejs和webpack在手）

安装node-sass

npm install node-sass gulp-sass --save-dev

必须要安装，它是node调用css预编译器库的桥梁
gulp-sass依赖node-sass来进行协调编译我们的scss文件

1.编辑scss文件
global.scss 一些全局的样式

*{
  margin: 0;
  padding: 0;
  font-size: 14px
};

vars.scss 一些变量

$blue-font:#1b85ff;

index.scss 如何引入外部的scss、使用变量

@import "./common/global";
@import "./common/vars";

h1{
  color: $blue-font
};

2.用gulp来编译，修改gulpfile.js：

var gp = require('gulp');
var sass = require("gulp-sass");
gp.task("css",function(){
   gp.src("./mycss/index.scss").pipe(sass()).pipe(gp.dest("./mycss/"))
})

3.执行gulp任务

$ gulp css

4.查看gulp编译的index.css

* {
  margin: 0;
  padding: 0;
  font-size: 14px; }

h1 {
  color: #1b85ff; }