gulp-sass的有关问题

我们在编译sass文件之前需要先安装sass插件，在命令行里输入：cnpm install gulp-sass –save-dev

安装完成后就可以编译sass文件，如果抛出new Error(error.missingBinary())问题，应该就是你没有安装node sass。请看出错示例：



出现这种类似错误的时候，读者可以考虑是不是没有安装node sass，如果没有直接安装：cnpm install node-sass –save-dev

安装完成之后，再次编译sass文件，这时，读者还可能会出现一个问题，



文件编译完成，但是仍然抛出错误，读者可以看看自己的sass文件，看一下是sass后缀名还是scss后缀名。这里先讲一下两者的区别：

sass 和 scss 其实是同一种东西，我们平时都称之为 sass，两者之间不同之处有以下两点：

文件扩展名不同，sass 是以“.sass”后缀为扩展名，而 scss 是以“.scss”后缀为扩展名

语法书写方式不同，sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 scss 的语法书写和我们的 css 语法书写方式非常类似。

来看一个示例：

sass语法：

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
font: 100% $font-stack
color: $primary-color

scss语法：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

编译出来的css:

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

可以看出sass和scss两者的格式有很大的区别。如果读者编译的文件是sass文件，但是文件内容是scss格式的，编译运行就会出现上述错误，将文件代码改成sass格式就可以。或者代码还是scss,将sass文件扩展名改为scss。

博主推荐还是用scss比较方便。