SASS入门1
2015年10月19日
1.SASS和SCSS的区别
1）文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2）语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号"{}"和分号";"，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似
示例：
SASS语法：
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color
SCSS语法：
$font-stack: Helvetica, sans-serif； //定义变量
$primary-color: #333； //定义变量
body {
font: 100% $font-stack;
color: $primary-color;
}
2.SASS/SCSS与CSS写法的差别
1）SASS无大括号和分号
2）SCSS与CSS写法无差别
3.SASS的编译
SASS的编译方法：命令编译、GUI工具编译、自动化编译
1）命令编译
命令编译是指使用电脑中的命令终端，通过输入Sass指令来编译Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在命令终端输入
单文件编译（对一个单文件进行编译）
sass<要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
多文件编译（对整个项目所有Sass文件编译成CSS文件）
sass sass/:css/
上面的命令表示将项目中"sass"文件夹中所有".scss"(".sass")文件编译成".css"文件，并且将这些CSS文件都放在项目"css"文件夹中。
缺点及解决办法
在实际编译过程中，你会发现上面的命令，只能一次性编译。每次个性保存".scss"文件之后，都得重新执行一次这样的命令。如此操作太麻烦，其实还有一种方法，就是在编译 Sass 时，开启"watch"功能，这样只要你的代码进行任何修改，都能自动监测到代码的变化，并且给你直接编译出来：
sass --watch<要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
watch举例：
假设我本地有一个项目，我要把项目中"bootstrap.scss"编译成"bootstrap.css"文件，并且把编译出来的文件放在"css"文件夹中，我可以在命令端执行：
sass --watch
sass/bootstrap.scss:css/bootstrap.css
一旦bootstrap.scss文件有任何修改，只要重新保存了修改的文件，命令终端就能监测，并能重新编译出文件
2）GUI界面工具编译
4.输出方式
1）嵌套输出方式nested
Sass提供了一种嵌套显示CSS文件的方式。例如：
nav{
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
display: inline-block;
}
a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
在编译的时候带上参数"--style nested";
编译出来的 CSS 样式风格：
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
2）展开输出方式expanded
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
在编译的时候带上参数"--style expanded":
sass --watch test.scss:test.css --style expanded
这个输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行，同样上面的代码，编译出来：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
3）紧凑输出方式compact
nav{
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
display: inline-block;
}
a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
在编译的时候带上参数"--style compact":
sass --watch test.scss:test.css --style compact
该方式适合那些喜欢单行 CSS 样式格式的朋友，编译后的代码如下：
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
4）压缩输出方式 compressed
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
在编译的时候带上参数"--style compressed":
sass --watch test.scss:test.css --style compressed
压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格：
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
一段时间之后，你实际上就不再需要写 CSS 代码了，只用写 Sass 代码。在这种情况下，你只需要设定输出格式为压缩格式，知道输出的 CSS 代码可以直接使用即可。
5.Sass的调试
只要浏览器支持"sourcemap"功能即可在浏览器中调试。早一点的版本，需要在编译的时候添加"--sourcemap"参数:
sass --watch --scss --sourcemap
style.scss:style.css
在Sass3.3版本之上，不需要添加这个参数也可以：
sass --watch style.scss:style.css
在命令终端，你将看到一个信息：
Change detected to: style.scss
write style.css
write style.css.map
这时你就可以调试你的代码
6.声明变量
定义变量的语法：
以"$"开头： $width: 300px;
Sass变量包括三个部分：
1.声明变量的符号"$"
2.变量名称
3.赋予变量的值
来看一个简单的示例，假设你的按钮颜色可以给其声明几个变量：
$brand-primary: darken(#428bca, 6.5%) !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: darken($btn-primary-bg, 5%) !default;
如果值后面加上!default则表示默认值
7.普通变量与默认变量
1）普通变量
定义之后可以在全局范围内使用。
$fontSize: 12px;
body{
font-size:$fontSize;
}
编译后的css代码：
body{
font-size: 12px;
}
2）默认变量
sass的默认变量仅需要在值后面加上!default即可。
$baseLineHeight:1.5 !default;
body{ line-height: $baseLineHeight; }
编译后的css代码：
body{
line-height:1.5;
}
sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{ line-height: $baseLineHeight; }
编译后的css代码：
body{ line-height: 2;}
可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。
8.变量的调用
在Sass中声明了变量之后，就可以在需要的地方调用变量。调用变量的方法也非常的简单。
比如在定义了变量
$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color: #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;
在按钮button中调用，可以按下面的方式调用
.btn-primary{
background-color: $btn-primary-bg;
color: $btn-primary-color;
border: 1px solid $btn-primary-border;
}
编译出来的CSS:
.btn-primary{
background-color: #337ab7;
color: #fff;
border: 1px solid #2e6da4;
}
9.局部变量和全局变量
示例：
//scss
$color: orange !default;//定义全局变量(在选择器、函数、混合宏....的外面定义的变量为全局变量)
.block{
color: $color;//调用全局变量
}
em{
$color: red;//定义局部变量
a{
color: $color;//调用局部变量
}
}
span{
color: $color;//调用全局变量
}
css的结果:
//CSS
.block {
color: orange;
}
em a {
color: red;
}
span {
color: orange;
}
上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成，全局变量就是定义在元素外面的变量，如下代码：
$color: orange !default;
$color就是一个全局变量，而定义在元素内部的变量，比如$color:red;是一个局部变量。
除此之外，Sass现在还提供一个!global参数。!global和 ！default 对于定义变量都是很有帮助的。我们之后将会详细介绍这两个参数的使用以及其功能。
1）全局变量的影子
当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。
示例：
$color: orange !default;//定义全局变量
.block{
color: $color;//调用全局变量
}
em{
$color: red;//定义局部变量（全局变量$color的影子）
a{
color: $color;//调用局部变量
}
}
