# css功能扩展
## 嵌套规则
sass允许将一套css样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器
``` #main p{ color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } ```
## 父选择器&
可以用&代表嵌套规则外层的父选择器
``` a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } } ```
&必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器
``` #main { color: black; &-sidebar { border: 1px solid; } } ```
## 属性嵌套
有些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.5em 1em 0 2em, Helcetica, Arial, sans-serif
- maps，相当于js中的object, （key1: value1, key2: value2)
### 字符串
sassscript支持有引号字符串和无引号字符串，编译css文件不会改变其类型，只有一种情况例外，使用#{}时，有引号字符串将被编译为无引号字符串，这样便于mixin中引用选择器名
``` @mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @include firefox-message(".header"); ```
编译成
``` body.firefox .header:before { content: "Hi, Firefox users!"; } ```
## 插值语句
通过#{} 插值语句可以在选择器或属性名中使用变量：
``` $name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; } ```
## 变量定义！default
可以在变量的结尾添加!default给一个未通过！default声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值
``` $content: "First content"; $content: "Second content?" !default; $new_content: "First time reference" !default; #main { content: $content; new-content: $new_content; } ```
编译为
``` #main { content: "First content"; new-content: "First time reference"; } ```
**变量是null空值时将视为未被！default赋值**
``` $content: null; $content: "Non-null content" !default; #main { content: $content; } ```
编译为
``` #main { content: "Non-null content"; } ```
## @import
通常@import寻找sass文件并将其导入，在以下情况下，@import仅作为普通的css语句，不会导入任何sass文件。
- 文件扩展名是.css
- 文件名以http://开头
- 文件名是url()
- @import包含media queries
## @media
sassscript中允许在css规则中嵌套。如果@media嵌套在css规则内，编译时，@media将被编译到文件的最外层，包含嵌套的父选择器
``` .sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } ```
编译为
``` .sidebar { width: 300px; } @media screen and (orientation: landscape) { .slidebar { width: 500px; } } ```
## @extend
@extend可以将一个选择器下的所有样式继承给另一个选择器
``` .error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } ```
这样就会将error下的所有样式继承给seriousError
## @extend-Only选择器
sass引入了"占位符选择器",计作%，当它们单独使用时，不会被编译到css文件中，定这套样式并不是给某个元素用，而是只通过@extend指令使用。
``` // 这条规则在单独使用的时候并不会被编译到css中 #content a%extreme { color: blue; } .notice { @extend %extreme; } ```
编译成
``` #content a.notice { color: blue; } ```
