sass学习(一)：变量、嵌套与导入
一 使用变量
sass使用的一大好处就是可以使用变量，对于那些重复使用的属性，可以通过变量名来引用。
1.变量声明
sass中变量通过$来声明，书写方法与CSS相似，属性值可以使用空格和逗号进行分割。与CSS属性不同的是，其变量可以声明在规则块外，在规则块内部声明的变量只能在本规则块内使用。举例如下：
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}2.变量引用
CSS标准值可以存在的地方变量就可以引用，CSS生成时，变量会被他们的值所替代。
3.变量名中的下划线
变量名中的中划线与下划线是相互兼容的，也就是说，当声明变量为a-b时，使用a_b也可以进行引用，但是这个规则对于纯CSS来说如id，class名是不适用的。
二 嵌套规则
1.普通嵌套
sass提供嵌套规则，在CSS中，对于某一块的样式设定常常需要写很多遍，但是使用嵌套会使得要是设置更加清晰，避免了重复书写，可读性高，当被解析为CSS时，便会将嵌套恢复成CSS对应的样式，举例如下：
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}2.父选择器&
有时我们不希望后代选择器生成这种连接，比如下面这种情况sass就无法工作：
article a {
color: blue;
:hover { color: red }
}3.群组选择器的嵌套
当在同一个容器元素里需要对群组进行样式设置时，使用嵌套可以减少代码量，举例如下：
.container {
h1, h2, h3 {margin-bottom: .8em}
}nav, aside {
a {color: blue}
}4.子组合选择器和同层组合选择器
使用>表示选择子代，使用+选择相邻的同层元素，使用~选择同层选择器，在嵌套中可以自由的选择使用以上选择器，举例如下：
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}5.属性嵌套
除了选择器，属性也可以嵌套编写，对于border-width，border-color等属性，在sass中只需要写一次border，嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样：
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}三导入sass文件
sass可以使结构更加清晰，减少代码重复编写的同时增加了代码的可读性，但当代码的量比较大时，就会变得不那么清晰，故而可以拆开成多个样式文件，css与sass都有@import规则，即从外部引入其他的样式，差别是，css在运行到@import时，才会从外部加载css，这会使得网页加载速度变慢，而sass会在当时直接加载外部文件。1.sass局部文件
有时我们并不需要把所有的sass文件转换为单独的css文件，对于不想转换成为css文件的，可将其文件名前加上下划线，当@import一个文件时，可以不写其全名，直接写下划线后面的部分。
2.默认变量值
sass的同一变量若声明多次，则后面的样式会覆盖前面的样式，我们可以使用!default的方式，将某一样式声明为默认样式，当导入文件对这一变量有赋值时，则其为所赋值，否则为默认值。
3.嵌套导入
跟原生的css不同，sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。
4.原生导入
sass通常会在@import处以sass格式导入文件，也可以兼容css，当以下三种情况出现时，会以原生的方式导入，这会造成浏览器的额外下载：
1）文件后缀是.css；2）被导入的文件是一个url地址；3）被导入的文件是url（）的值。