css预处理器之sass

之前预处理器入门学的是less，但是最近听已经入职的同族小伙伴讲公司都用的sass，那就再来充个电，技多不压身哈哈
先前写的初学less

Sass十分钟入门系列

1. 变量 和在less中一样，sass也引入了变量，定义变量的格式为 $变量名：设置值;使用时就直接作为一个属性值。而在less中格式为 @变量名：设置值。
2. 嵌套 在less中也有同样的用法，一目了然的层级关系，看起来优雅整齐。

3. 导入 sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的 @import

   css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
   sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。

4. minxin 混入 这个东西又是跟less有共通之处了~ 可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。详情跟less中的用法基本一样，目前还没有发现两个mixin有啥不同

5. 扩展继承 通过 @extend来实现代码组合声明，使代码更加优越简洁
6. 运算 sass和less也可进行简单的加减乘除运算等
7. 颜色 sass中集成了大量的颜色函数，让变换颜色更加简单。

Sass和Less的异同

转载自别的优秀博主的博客，我对两者的区别理解并不深入，以后补充。

Sass语法

中文官网关于语法的讲解
1. 文件后缀名
sass有两种文件后缀名，一种是sass，不使用大括号和分号，只用缩进简单的展示出来；另一种是scss，这种酒和我们平时写css文件差不多的格式。所以通常为了代码的美观以及健壮性，选择scss格式较好。
2. 导入
3. 注释
4. 变量
5. 嵌套
6. 混合
7. 继承
8. 函数
9. 运算
10. 条件判断及循环