sass基础

1.变量

　　1.1变量功能，$符号来标识变量，可通过变量名引用

　　1.2.变量名用中划线和下划线相通，$highlight-color == $highlight_color

2.嵌套规则

　　2.1层级嵌套

　　2.2父选择器标识符&

　　2.3 >：选择一个元素的直接子元素;+：选择一个元素紧跟的元素；~：选择一个元素同层的元素

　　　　例：article > section { border: 1px solid #ccc } ；header + p { font-size: 1.1em }；article ~ article { border-top: 1px dashed #ccc }

　　2.4嵌套属性：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。

　　　　例：nav {border-style: solid; border-width: 1px; border-color: #ccc; }

　　　　->　nav {border: {style: solid;width: 1px;color: #ccc;}}

3.导入sass文件

　　3.1@import 可以省略.sass或.scss文件后缀

　　3.2默认变量值
　　　　$fancybox-width: 400px !default;
　　　　.fancybox {
　　　　　　width: $fancybox-width;
　　　　　　}
　　　　在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。

　　　　如果用户没有做这样的声明，则$fancybox-width将默认为400px。

　　3.3嵌套导入
　　　　举例说明，有一个名为_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; } }

　　3.4原生css导入

　　　　不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入

4.注释

　　sass提供了多一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中

5.混合器：sass的混合器实现大段样式的重用，混合器使用@mixin标识符定义。

　　例：下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

　　@mixin rounded-corners {
 　　 -moz-border-radius: 5px;
 　　 -webkit-border-radius: 5px;
　　  border-radius: 5px;
　　}

　　然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：

　　notice {
 　　 background-color: green;
 　　 border: 2px solid #00aa00;
 　　 @include rounded-corners;
　　}
　　//sass最终生成：

　　.notice {
　　  background-color: green;
 　　 border: 2px solid #00aa00;
　　  -moz-border-radius: 5px;
　　  -webkit-border-radius: 5px;
　　  border-radius: 5px;
　　}

　　5.2混合器中的css规则

　　　　混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，甚至可以使用sass的父选择器标识符&

　　5.3给混合器传参

　　　　当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像：

　　　　@mixin link-colors($normal, $hover, $visited) {
 　　　　 color: $normal;
　　　　  &:hover { color: $hover; }
　　　　  &:visited { color: $visited; }
　　　　}

　　　　当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

　　　　a {
　　　　  @include link-colors(blue, red, green);
　　　　}
　　　　//Sass最终生成的是：

　　　　a { color: blue; }
　　　　a:hover { color: red; }
　　　　a:visited { color: green; }

6.继承器：@extend指令可以让一个CSS类继承另一个CSS类。与@mixin作用类似，但使用场景不同。当多个元素之间共享一组属性值，同时又有各自额外属性值时（可以覆盖继承的属性值）。

　　例：.alert { padding: 10px; background-color: silver; color: white; }

　　　　.info { @extend .alert; background-color: dodgerblue; }

　　编译后：.alert, .info{ padding: 10px; background-color: silver; color: white; }

　　　　 .info { background-color: dodgerblue; }  //继承alert属性，重写background-color属性

　　6.2 一个选择器可以继承多个选择器

　　　　.important-error { @extend .alert; @extend .important; background-color: red; }

　　6.3 可以连锁继承，即儿子继承父亲的，孙子继承儿子的时候包含了儿子继承父亲的内容。

　　6.4占位符选择器：没有被实际应用，也就是说html代码中没有使用该类，并且不希望被编译输出到最终的css文件中，它的唯一目的就是扩展其他选择器。

 　　　占位符选择器类似于类选择器，但是，它们不是以句点(.)开头，而是以百分号(%)开头。

　　　 例：%alert { padding: 10px; background-color: silver; color: white; } .info { @extend %alert; background-color: dodgerblue; }

　　　　.info{ padding: 10px; background-color: silver; color: white; } .info { background-color: dodgerblue; }  // 类似作为一个变量，不输出到css文件中