前言
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; }
然后我们将它们转译为css，就会得到下列代码↓↓↓
#header { width: 1000px; margin-left: auto; margin-right: auto; }
.gallery { width: 600px; margin-left: auto; margin-right: auto; }
6、防转码
有些时候，如果我们不想转译某些文件该怎么办呢，其实我们只要在scss文件的名字前加_ ，这样scss文件就不会被检测到。
不过这个方法在使用编译工具自动转码时貌似会失效，所以大家酌情使用。
网友评论