scss的使用

1.变量声明

ex:
$nav-color:#F90;
  $width:100px;	
  nav{
    width:$width;
    color:$nav-color;
  }
  //编译后
  nav{
    width:100px;
    color:#F90;
  }

注意:在这段代码中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块 内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

 

2.变量引用

ex:
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

3. 嵌套CSS 规则;

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

4.父选择器的标识符&;

规则一:
ex:
article a {
  color: blue;
  &:hover { color: red }
}
article a { color: blue }
article a:hover { color: red }
规则二:
#content aside {
  color: red;
  body.ie & { color: green }
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

5. 群组选择器的嵌套;

.container h1, .container h2, .container h3 { margin-bottom: .8em }
.container {
  h1, h2, h3 {margin-bottom: .8em}
}

6. 嵌套导入

一个名为_blue-theme.scss的局部文件，内容如下：
aside {
  background: blue;
  color: white;
}
然后把它导入到一个CSS规则内，如下所示：
.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}