scss基础
找一个点看官网的demo入手，入手后边用边找对应的API。只要学会最基本的东西，如何编译，嵌套的写法，如何计算。就和学js一样，最开始只要学习变量，判断，循环，随着项目过程，不断的看api，慢慢就熟了，然后可以看一看背后的东西。
只要知道是什么，和最基本的东西就行。
前端技术发展的很快，要不断的学一些新东西，这样以这些东西为基础的新东西发展出来时，才能很快知道和学习。
变量
scss中可以定义变量，方便统一修改和维护。1
2
3
4
5
6
7
8
9//scss style
//-----------------------------------
$fontStack: Helvetica, sans-serif;
$primaryColor: #333;
body {
font-family: $fontStack;
color: $primaryColor;
}
1 | //css style |
嵌套
scss可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。
1 | //scss style |
1 | //css style |
导入
1 | scss中如导入其他scss文件，最后编译为一个css文件，优于纯css的@import |
1 | //scss style |
1 | //css style |
mixin
scss中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。
1 | //scss style |
1 | //css style |
扩展/继承
scss可通过@extend来实现代码组合声明，使代码更加优越简洁。
1 | //scss style |
1 | //css style |
运算
scss可进行简单的加减乘除运算等
1 | //scss style |
1 | //css style |
颜色
scss中集成了大量的颜色函数，让变换颜色更加简单。
1 | //scss style |
1 | //css style |
compass
compass由scss的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对scss的扩展。