关于我在scss遇到的一些坑点

前言

scss（sass）是目前世界上最为成熟、稳定的css预处理器，它可以无缝衔接目前市面上所有版本的css库，为css增加编程性，使css无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。

1、scss和sass

scss和sass都是一种css预处理器语言，他们性质十分相近，但是还是有一定程度的区别的
1、scss的文件扩展名是.scss，而sass的文件扩展名是.sass
2、Sass是以严格缩进式语法规则来书写的，不带大括号和分号；而SCSS的语法和CSS书写语法类似。

2、首行声明

在使用scss时，首先要做的第一件事就是声明编码类型，如下↓↓↓

scss的编码声明

就是将这个scss文件声明为utf-8的编码格式，这里有一个需要注意的点

utf-8的后面一定要记得家分号，而大多数编译工具都不会提示你需要加分号，这就导致很多人在刚接触的时候就直接“over”。

3、将scss文件转为css文件

当我们编写好scss代码时，我们的工作量其实只完成了一半，我们的最终目标是css文件，所以我们需要一步“转化”。
通常你的编译工具应该都会自带这个转化功能，我以hbuilder为例子，我们先选择工具，然后选择预编译器设置：

预编译器设置

双击.sass.scss：

参数设置

点击智能完成就配置好了，不过也会出现只能完成是灰的情况，这个时候你就需要根据界面中的环境变量说明，再结合自己的情况手动填写了。

不过，有的时候我们也会离开编译工具，那这个时候我们应该如何转化scss文件呢？
这个时候我们就可以使用命令行的方式编译
首先我们先进到scss文件所在目录：

scss所在目录

然后在地址栏中输入cmd打开命令行：

命令行1

我以图中的new_file.scss文件为例子，单个文件的编译方式为：
单文件编译 scss 目标文件生成目录/文件名

命令行2

然后我们再打开文件夹一看：

生成css文件后

果然生成了css文件，顺带还生成了一个.map文件，大家可千万别把这个文件删除了，.map文件适用于定位css代码位于scss的行数，方便代码调试。

下面我在介绍几种不同风格的转码方式：
--style nested：嵌套缩进的css代码，它是默认值。

--style expanded：没有缩进的、扩展的css代码。

--style compact：简洁格式的css代码。

--style compressed：压缩后的css代码。

有人会说，一个一个转换不是很麻烦吗，如果我的文件多，那要转到猴年马月啊，那么现在我来介绍如何使用命令行实时监测转码：
实时监控：scss --watch 监测目录:生成目录

实时监测

这样只要你在检测目录下生成新的scss文件，命令行就会自动帮你在生成目录下创建css文件了，不过在命令行需要一直打开才行，如果你退出命令行，检测就会结束。

4、路径

这是个老生常谈的问题了，不要有中文！，不要有中文！，不要有中文！
这些个语言啊，软件啊，都是老外写的，所以他们都是不懂中文的，understand！

5、一些scss语法

scss和css不同，他是有编程性的，下面我就来介绍一些scss的语法

声明变量：$变量名

声明函数：@function 函数名（）{}

混淆：@mixin（通过@include拼接）：
混淆的功能是将写好的部分代码接入其他代码，他通过@include进行拼接
举个例子：我们有下列一串代码

@mixin center-block { margin-left: auto; margin-right: auto; }
#header{ width:1000px; @include center-block; } 
.gallery{ width:600px; @include center-block; }

然后我们将它们转译为css，就会得到下列代码↓↓↓

#header { width: 1000px; margin-left: auto; margin-right: auto; } 
.gallery { width: 600px; margin-left: auto; margin-right: auto; }

继承：@extend
继承用于共享规则和选择器之间的关系。它可以扩展所有其他类的样式在一个类中，也可应用于自己特定的样式。
举个例子：我们有下列代码

.style{
    font-size: 30px;
    font-style: italic;
}

h2{
    color: #787878;
    @extend .style

}
.container{
    @extend h2
}

编译后的css代码如下：

.style, h2, .container {
    font-size: 30px;
    font-style: italic;
 }

h2, .container {
    color: #787878;
}

导入：@import 文件名（不用后缀）
导入的作用是将一个scss文件引入另一个scss文件
举个例子，我们有以下代码

@mixin center-block { margin-left: auto; margin-right: auto; }

我们将这个这个文件写在mixin.scss文件中,然后我们在一个新的scss文件中写如下代码

@import 'mixin'; 
#header{ width:1000px; @include center-block; } 
.gallery{ width:600px; @include center-block; }