#css功能扩展
##嵌套规则
sass允许将一套css样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器
```
#mainp{
color:#00ff00;
width:97%;
.redbox{
background-color:#ff;
color:#00;
}
}
```
##父选择器
可以用代表嵌套规则外层的父选择器
```
a{
font-weight:bold;
text-decoration:none;
:hover{
text-decoration:underline;
}
}
```
必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器
```
#main{
color:black;
-sidebar{
border:1pxsolid;
}
}
```
##属性嵌套
有些css属性遵循相同的命名空间，比如font-size,font-family等，为了便于管理这样的属性，sass允许将属性嵌套在命名空间
#sassScript
##变量
sassScript最普遍的用法就是变量，变量以美元符号开头，赋值方法与css属性的写法一样：
```
$width:5em;
#main{
width:$width;
}
```
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!global声明：
```
#main{
$width:5em!global;
width:$width;
}
#sidebar{
width:$width;
}
```
##数据类型
SassScript支持以下的数据类型：
-数字，1，2，10
-字符串，有引号字符串与无引号字符串，"foo"，"bar","baz"
-颜色，blue,#04a3f9
-布尔型，true,false
-空值，null
-数组（list),用空格或逗号作分隔符，1.5em1em02em,Helcetica,Arial,sans-serif
-maps，相当于js中的object,（key1:value1,key2:value2)
###字符串
sassscript支持有引号字符串和无引号字符串，编译css文件不会改变其类型，只有一种情况例外，使用#{}时，有引号字符串将被编译为无引号字符串，这样便于mixin中引用选择器名
```
mixinfirefox-message($selector){body.firefox#{$selector}:before{
content:"Hi,Firefoxusers!";
}
}
includefirefox-message(".header");```
编译成
```
body.firefox.header:before{
content:"Hi,Firefoxusers!";
}
```
##插值语句
通过#{}插值语句可以在选择器或属性名中使用变量：
```
$name:foo;
$attr:border;
p.#{$name}{
#{$attr}-color:blue;
}
```
##变量定义！default
可以在变量的结尾添加!default给一个未通过！default声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值
```
$content:"Firstcontent";
$content:"Secondcontent?"!default;
$new_content:"Firsttimereference"!default;
#main{
content:$content;
new-content:$new_content;
}
```
编译为
```
#main{
content:"Firstcontent";
new-content:"Firsttimereference";
}
```
**变量是null空值时将视为未被！default赋值**
```
$content:null;
$content:"Non-nullcontent"!default;
#main{
content:$content;
}
```
编译为
```
#main{
content:"Non-nullcontent";}
```
##
import通常
import寻找sass文件并将其导入，在以下情况下，import仅作为普通的css语句，不会导入任何sass文件。-文件扩展名是.css
-文件名以