sass初步认识2

sass可以使用变量，采用 $ 来进行变量声明，格式为：

$highlight-color:#f90;(声明方式和css属性声明类似。使用的变量名可以更加语义化)

与js分为全局变量和局部变量类似，sass定义在规则块之外的变量，该变量均可被使用。而定义在规则块之内的变量只能在规则块内部使用，此时，其他规则块声明新的名字相同的变量。
例：
$nav-color:#f90;
nav{
$width:100px;
width:$width;
color:$nav-color;
}
编译后：
nav{
width:100px;
color:#f90;
}

变量值除了被引用外，还可以引用其他变量值；
例：
$highlight-color:#f90'
$highlight-border:11px solid $highlight-color;
.selected{
border:$highlight-border;
}
编译后：
.selecter{
border:1px solid #f90;
}

变量名可以用中划线和下划线，通常用中划线更普遍，两者可以相互兼容。

嵌套：
sass的嵌套功能可以减少很多重复的工作。
例：
#content{
article{
h2{ color:#333}
p{ margin-bottom:1.4em}
}
aside{background-color:#eee}
}
编译后：
#content article h2{color:#333}
#content article p{ margin-bottom:1.4em}
#content aside{background-color:#eee}

如果出现伪类，如 hover:，则需要使用特殊结构&。&有一个替换的功能。
例：
article a{
color:blue;
$:hover{ color:red}
}
编译后
article a{color:blue}
arbicle a :hover{color:blue}

如果没有$,则article内连接的所有子元素在被hover时均变成红色。

$的使用例二：
#content aside {
color:red;
body.ie ${color:green}
}
编译后：
#content aside{color:red}
body.ie #content aside{color:green}

群组选择器也可以进行嵌套。
.container{
h1,h2,h3{margin-bottom: .8em}
}

子组合选择器和同城组合选择器：>、+、~
>：选择一个元素的直接子元素；article>section{border:1px solid #ccc};article的section子元素。
+：选择一个元素后紧跟的某个元素；header+p{fonr-size:1em};header后面紧跟的p与元素。
~：选择一个原色同层的全体某个元素。article~article{border:1px daseed #ccc};article同层的全部article元素。

除了嵌套选择器，sass也可以嵌套属性。
例：nav{
border:{
style:solid;
width:12px'
color:#fff
}
}
例二:
nav{
border:1px solid red{
left:solid;
right:12px'
}
}

@import的在sass的使用：
原声css也可以使用@import,但是是在执行到@import的时候才会加载，速度慢。而sass的在生成css文件的时候就把相关文件导入进来，比较快。
sass中@import的使用方法是：“@import 文件名”
文件可以是sass文件，也可以是scss文件。当需要导入的是css文件时候，为了被认为是原生css中的@import的使用，需要将css文件后缀改为sass或者scss。如果要导入的文件不希望单独生成独立的css
文件，这样的sass文件为局部文件，命名时在文件名前加一个下划线，在引入的时候不用写出下划线和后缀名。

!default的使用：与css中的!important相反，当变量在前面已经被声明过了，在后面引用赋值时出现
!default时，变量值使用之前声明的值，否则使用后面的默认值。

sass的注释方法有两种：
1：//（在一行以内，在css中不会出现）
2：/*.....*/(不限制一行，在css中会被看见，若写在大括号里面等不利于sass转化css的地方，在css中
也不会出现)