1.背景介绍
我们学过都知道CSS只是一门描述性的语言，你只能一行一行单纯地描述，并不能像JS那样使用变量、循环、运算等方式来操作。 CSS预处理语言的出现，极大的解放了我们，在CSS预处理语言当中，我们可以使用变量，嵌套，循环等来写CSS。而sass是国内使用人数比较多的一种，更强大，更成熟。
2.知识剖析
2.1安装使用。
SASS使用 sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!） 先从官网下载Ruby并安装。然后再安装sass即可。安装好sass，之后我们就可以直接写sass，写好之后把Sass编译成css。编译方法很多，比如命令行编译，编译软件koala，我们常用的编辑器也可以webstorm，sublime也可以实时编译。
具体可以去sass官网看下教程：https://www.sass.hk/install/
2.2 一些常用的语法
变量，Sass的变量包括3部分：声明符、变量名、值。值可以是数字，字符串等。比如：$height:12px;，到时我们需要用12px,直接调用$height。变量有一个全局的，一个局部的变量。局部变量：一般指的是在“选择器、混合宏、继承等”内部定义的变量。全局就是在外部定义的变量。
嵌套，简单说就是在一个选择器中再去嵌套选择器，属性等。
-
（1）选择器嵌套；操作方便，缺点是，层级深的话编译出来的选择器也多。
-
（2）属性嵌套；一个选择器中的属性前缀一样的话，可以嵌套，比如多个font。
-
（3）伪类嵌套；加上&使用，编译时会自动加上选择器。
注释，3种注释方式：（1）//注释内容；（2）/注释内容/；（3）/!注释内容/。
第一种，只在sass中起作用，不编译到CSS。
第二种，编译到CSS，因为跟CSS注释方法一样。
第三种，为了防止压缩工具删除，我们有时用这种方式，一般是为了声明版权时使用。
数字运算 ，有加减乘除，加法和减法一样都是要相同单位才能运算，不然编译不了。乘除就不能用相同的单位，只要一个有单位即可。两个相同单位的话编译不了。乘除加上（）。
这是我们常用的sass语法，想学习更多可以去 sass教程 学习。
3.常见问题
sass想要使用让SASS监听某个文件或目录，但在命令行下面语句：Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8 Use --trace for backtrace.
4.解决方案
这是路径中有中文，改为英文路径即可，我们开发中路径不应该有中文，不然会各种莫名奇妙报错。
5.编码实战
暂无
6.扩展思考 sass和less的不同？
1,变量名称的不同，less是@，sass是$。
2,Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中
3，sass支持条件语句，比如if else for等，less不支持
4,sass可以设置输出类型，
nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码
less就不可以
7.参考文献
http://www.manongjc.com/sass/sass_tutorial.html
码农Sass 教程 - Sass入门学习
sass中文网
https://www.zhihu.com/question/22285654/answer/20909926
sass/scss 和 less的区别
8.更多讨论。
1.为什么使用sass，而不是直接用CSS。
因为可以减少我们的代码量，更简易的进行开发。让我们像使用编程语言一样，来写CSS。
2.嵌套太深，选择器太多有什么坏处。
选择器太多会影响我们的选择权重，而且后期不易维护。建议只嵌套三个
3.进行除法运算要注意什么?
要注意的，只能一个带单位，还有就是加上（）不然编译会错误。
网友评论