sass基本用法

Sass是一款强化css的辅助工具。在css的语法基础上增加了变量、嵌套、混合、导入等高级功能。

一、使用变量

1：变量声明 (sass使用$符号来标识变量)
2、变量的引用
3、变量名用中划线还是下划线分隔（一般用中划线）

二、嵌套css规则（避免重复输入父选择器）

1、在sass中，可以在规则块中嵌套规则块，一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

  //sass写法
  #content {
      background-color: #f5f5f5;
	  article {
	    h1 { color: #333 }
	    p { margin-bottom: 1.4em }
	  }
	  aside { background-color: #EEE }
  }

编译后：

#content{background-color: #f5f5f5;}
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE 

2、父选择器的标识符& （ & 代表嵌套规则外层的父选择器）
3、群组选择器的嵌套
4、子组合选择器和同层组合选择器>、+和~
5、嵌套属性

三、导入sass文件

四、静默注释（注释的内容不会出现在生成的css文件中//开头，注释内容直到行末）

五、混合器

sass混合器可以实现大段样式的重用。
1、混合器使用@mixin标识符定义，通过@include来使用混合器

  /*定义一个添加跨浏览器的圆角边框混合器*/
  @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;
  }
  /*sass最终生成*/
  .notice {
	  background-color: green;
	  border: 2px solid #00aa00;
	  -moz-border-radius: 5px;
	  -webkit-border-radius: 5px;
	  border-radius: 5px;
}

2、混合器中的CSS规则

  @mixin no-bullets{
     list-style:none;
     li{
          list-style:none;
          margin-left:10px;
     }
  }
  

3、给混合器传参
混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式

@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; }