Sass又名SCSS，是CSS预处理器之一，，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。以下是我的学习笔记。
Sass安装环境
1.安装sass(mac)
①：Ruby安装
②：安装sass
sudo gem install sass
可以通过 sass -v检测是否完成安装
2.更新sass
gem update sass
3.卸载（删除）sass
gem uninstall sass
Sass编译调试
我们现在一般采用scss语法格式。SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式以“.scss”为扩展名。注意文件扩展名不能用.sass。
使用 Sass 进行开发,项目中还是引用“.css”文件.Sass 只不过是做为一个预处理工具，提前帮你做事情，只有你需要时候，它才有攻效。 Sass 开发之后，要让 Web 页面能调用 Sass 写好的东西，就得有一个编译过程。
编译方式
1.命令编译：命令编译是指使用你电脑中的命令终端，通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。
①单文件编译：(开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：)
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css （style是文件的名字）
②多文件编译：（对整个项目所有 Sass 文件编译成 CSS 文件，并且将这些 CSS 文件都放在项目中“css”文件夹中）
sass --watch sass/:css/
2.GUI界面工具编译
- Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
- CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
3.自动化编译
以下分别通过Grunt和Gulp来配置Sass的编译
①：Grunt 配置 Sass 编译的示例代码
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'style/style.css' : 'sass/style.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
②：Gulp 配置 Sass 编译的示例代码
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
gulp.watch('scss/*.scss', ['sass']);
});
gulp.task('default', ['sass','watch']);
编译错误：
在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”，在项目中文件命名或者文件目录命名不要使用中文字符。
不同样式风格的输出方法
1、嵌套输出方式 nested，在编译的时候带上参数“ --style nested”:
sass --watch test.scss:test.css --style nested
2、展开输出方式 expanded,在编译的时候带上参数“ --style expanded”:
sass --watch test.scss:test.css --style expanded
3、紧凑输出方式 compact，在编译的时候带上参数“ --style compact”:
sass --watch test.scss:test.css --style compact
4.压缩输出方式 compressed，在编译的时候带上参数“ --style compressed”:
sass --watch test.scss:test.css --style compressed
一段时间之后，你实际上就不再需要写 CSS 代码了，只用写 Sass 代码。在这种情况下，你只需要设定输出格式为压缩格式，知道输出的 CSS 代码可以直接使用即可。
Sass的调试
这张图表示的是，在chrome浏览器上改动相应的scss的样式，效果会实时同步出来，并且改动的代码会保存到本地。实现的方法可以看这个教程。
现在实现并不是一件难事，只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap” 参数：
sass --watch --scss --sourcemap style.scss:style.css
在 Sass3.3 版本之上，不需要添加这个参数也可以：
sass --watch style.scss:style.css
Sass的基本特性-基础
变量
声明变量
定义之后可以在全局范围内使用。
$fontSize: 12px;
body{
font-size:$fontSize;
} 编译后的css代码：
body{
font-size:12px;
}
普通变量
$baseLineHeight:1.5 !default;
body{
line-height: $baseLineHeight;
} 编译后的css代码：
body{
line-height:1.5;
}
默认变量（!default）
//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
color: $color;//调用全局变量
}
em {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}
}
span {
color: $color;//调用全局变量
}
全局变量与局部变量
嵌套
应该少用。
1、选择器嵌套
假设我们有一段这样的结构：
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header> 想选中 header 中的 a 标签，在写 CSS 会这样写：
nav a {
color:red;
} header nav a {
color:green;
} 那么在 Sass 中，就可以使用选择器的嵌套来实现：
nav {
a {
color: red; header & {
color:green;
}
}
}
选择器嵌套
2、属性嵌套
Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
} 在 Sass 中我们可以这样写：
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
属性嵌套
3、伪类嵌套：伪类嵌套和属性嵌套非常类似，只不过它需要借助`&`符号一起配合使用
我们就拿经典的“clearfix”为例吧：
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
} 编译出来的 CSS：
clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
伪类嵌套
混合宏
在 Sass 中，使用“@mixin”来声明一个混合宏
不带参数混合宏：
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
大括号里面是复用的样式代码。 带参数混合宏：
@mixin border-radius($radius:5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
声明
使用“@include”来调用一个混合宏
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
--------调用---------
button {
@include border-radius;
}
这个时候编译出来的 CSS:
button {
-webkit-border-radius: 3px;
border-radius: 3px;
}
调用
混合宏的参数--传一个不带值的参数
在混合宏中，可以传一个不带任何值的参数，比如：
@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}
在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。 在调用的时候可以给这个混合宏传一个参数值：
.box {
@include border-radius(3px);
} 编译出来的 CSS:
.box {
-webkit-border-radius: 3px;
border-radius: 3px;
}
传一个不带值的参数
混合宏的参数--传一个带值的参数
在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如：
@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
} 在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”:
.btn {
@include border-radius;
} 编译出来的 CSS:
.btn {
-webkit-border-radius: 3px;
border-radius: 3px;
}
混合宏的参数--传多个参数
Sass 混合宏除了能传一个参数之外，还可以传多个参数，如：
@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: 50%;
left: 50%;
margin-top: -($height) / 2;
margin-left: -($width) / 2;
} .box-center {
@include center(500px,300px);
} 编译出来 CSS:
.box-center {
width: 500px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
}
传多个参数
扩展/继承
在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。
//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
} .btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
} .btn-second {
background-color: orange;
color: #fff;
@extend .btn;
} 编译出来之后：
//CSS
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
} .btn-primary {
background-color: #f36;
color: #fff;
} .btn-second {
background-clor: orange;
color: #fff;
}
扩展/继承
占位符 %：通过 @extend 调用的占位符才会产生效果，编译出来的代码会将相同的代码合并在一起。
%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。
//SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
} .btn {
@extend %mt5;
@extend %pt5;
} .block {
@extend %mt5; span {
@extend %pt5;
}
}
编译出来的CSS //CSS
.btn, .block {
margin-top: 5px;
} .btn, .block span {
padding-top: 5px;
} 从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。
混合宏 VS 继承 VS 占位符
他们各有各的优点与缺点，先来看看他们使用效果：
a) Sass 中的混合宏使用
@mixin mt($var){
margin-top: $var;
} .block {
@include mt(5px); span {
display:block;
@include mt(5px);
}
} .header {
color: orange;
@include mt(5px); span{
display:block;
@include mt(5px);
}
} ---编译出来的结果---
.block {
margin-top: 5px; }
.block span {
display: block;
margin-top: 5px; } .header {
color: orange;
margin-top: 5px; }
.header span {
display: block;
margin-top: 5px; } 总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。 个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
混合宏(需要传参，用它)
.mt{
margin-top: 5px;
}
.block {
@extend .mt;
span {
display:block;
@extend .mt;
}
}
.header {
color: orange;
@extend .mt;
span{
display:block;
@extend .mt;
}
}
----编辑以后----
.mt, .block, .block span, .header, .header span {
margin-top: 5px;
}
.block span {
display: block;
}
.header {
color: orange;
}
.header span {
display: block;
}
总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。
个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
继承（没有参数，而且有一个基类已在文件中存在，用它）
%mt{
margin-top: 5px;
}
.block {
@extend %mt;
span {
display:block;
@extend %mt;
}
}
.header {
color: orange;
@extend %mt;
span{
display:block;
@extend %mt;
}
}
-----编译以后-------
.block, .block span, .header, .header span {
margin-top: 5px;
}
.block span {
display: block;
}
.header {
color: orange;
}
.header span {
display: block;
}
总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”
占位符（和继承没有大的区别，只是占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码）
注释
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2、类似 JavaScript 的注释方式，使用“//” 两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，来看一个示例： //定义一个占位符 %mt5 {
margin-top: 5px;
} /*调用一个占位符*/ .box {
@extend %mt5;
}
编译出来的CSS .box {
margin-top: 5px;
} /*调用一个占位符*/
注释
Sass的基本特性-运算
加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如：
.box {
width: 20px + 8in;
}
编译出来的 CSS:
.box {
width: 788px;
}
但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示：
.box {
width: 20px + 1em;
}
编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'.”
总结：in mm cm pt pc px等绝对单位都能运算；
ex em rem等相对当前字体的都不能运算
能换算的都会换算成px像素长度
不能换算的都会报编译错误
有个例外就是不加单位的话就相当于0
加法
Sass 的减法运算和加法运算类似，我们通过一个简单的示例来做阐述：
$full-width: 960px;
$sidebar-width: 200px; .content {
width: $full-width - $sidebar-width;
}
编译出来的 CSS 如下： .content {
width: 760px;
}
减法
Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例：
.box {
width:10px * 2px;
}
编译的时候报“20px*px isn't a valid CSS value.”错误信息。
如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成：
.box {
width: 10px * 2;
}
编译出来的 CSS:
.box {
width: 20px;
}
乘法
”/ ”符号被当作除法运算符时有以下几种情况：
• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。 如下所示： //SCSS
p {
font: 10px/8px; // 纯 CSS，不是除法运算
$width: 1000px;
width: $width/2; // 使用了变量，是除法运算
width: round(1.5)/2; // 使用了函数，是除法运算
height: (500px/2); // 使用了圆括号，是除法运算
margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}
编译出来的CSS p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
} 在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。如下所示：
.box {
width: (1000px / 100px);
}
编译出来的CSS如下： .box {
width:;
}
除法