sass入门

  以前一直听别人讲css的预编译语言，自己也没有具体的看过语法，后来因为公司人都慢慢用，我也准备学起来了，看了文档，其实也挺简单的，变量，混合器，继承。怕忘掉，所以在这做个笔记，便于自己以后的使用。（贴点官网的例子，这样一目了然）

  　　1，变量声明

　　sass变量的声明和css属性的声明很像：

　　$highlight-color: #F90;

使用

$nav-color: #F90;
nav {
  $ 100px;
   $width;
  color: $nav-color;
}

//编译后

nav {
   100px;
  color: #F90;
}

其实看着还是挺简单的。
注意点：变量名用中划线还是下划线都是无所谓的，sass都识别


2，嵌套
这样可以省略很多选择器的，比较省代码
2-1:父选择器的标识符是&
2-2:群组选择器的嵌套可以用逗号隔开
2-3:子组合选择器>（

article section { margin: 5px }
article > section { border: 1px solid #ccc }
上例中，第一个选择器会选择article下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。

）
2-4:同层组合选择器：+（

header + p { font-size: 1.1em }
你可以用同层相邻组合选择器+选择header元素后紧跟的p元素

）
2-5:同层选择器～（

article ~ article { border-top: 1px dashed #ccc }
选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：

）
2-6:嵌套属性（把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样：

）
3.导入sass文件
用@import
4.混合器
定义

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

引入

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

生成

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
给混合器传参也是很好用的一个方法，比较像js的函数

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

a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
6.继承
感觉这个有点难我都没看透，感觉工作中都不敢乱用。