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 }}

大多数情况下我们都可以使用嵌套，它在解析时将父选择器加一个空格放在子选择器的前面，但存在伪类如:hover时，则需要特殊处理。

2.父选择器&

有时我们不希望后代选择器生成这种连接，比如下面这种情况sass就无法工作：

article a {  color: blue;  :hover { color: red }}

解决这种问题的办法是使用一种特殊的sass选择器，即父选择器，他是用&符号，可以放在选择器可放置的地方，可以解开嵌套规则的控制，他不会像后代选择器进行拼接，而是直接使用父选择器直接替换&。

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（）的值。