sass 简单用法快速上手操作

1. sass变量使用

使用 $ 符号来标识变量 ,例如定义变量 $nav-color: #F90; $width: 100px;
其中 $nav-color: #F90;在nav内外均可生效, 而 $width: 100px; 只在nav的{ }里生效

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

其中 $highlight-color: #F90;作为变量引用到 $highlight-border而生效,而 $highlight-border同样也可以作为变量被css样式引用

	$highlight-color: #F90;
	$highlight-border: 1px solid $highlight-color;
	.selected {
	  border: $highlight-border;
	}
	
	//编译后
	
	.selected {
	  border: 1px solid #F90;
	}

2. 选择器嵌套

#content作为上级元素可以直接递进嵌套其他内部元素使用避免重复书写#content 等上级元素

	#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 }

3. 父级选择器标识符 &

为article a 写：hover伪类选择器，嵌套会出现问题,我们就把父级选择器用 & 俩替代问题就解决了

	article a {
	  color: blue;
	  &:hover { color: red }
	}
	
	/*编译后*/
	article a {
	  color: blue;
	  article a:hover { color: red }
	}

4. 属性嵌套

border-style , border-width , border-color以及border-* 等都可以把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中

	nav {
	  border: {
		  style: solid;
		  width: 1px;
		  color: #ccc;
	  }
	}
	/*编译后*/
	nav {
	  border-style: solid;
	  border-width: 1px;
	  border-color: #ccc;
	}
 

5. 默认变量值

一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值

	$link-color: blue;
	$link-color: red;
	a {
		color: $link-color;
	}

在上边的例子中，超链接的color会被设置为red。这可能并不是你想要的结果，假如你写了一个可被他人通过@import导入的sass库文件，你可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
如果用户在导入你的sass局部文件之前声明了一个 $fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。

	
	$fancybox-width: 400px !default;
	.fancybox {
	width: $fancybox-width;
	}

6. 静默注释

两种情况,一种是双斜线单行注释如例题1 ,另一种注释写在属性或选择器中如例题2 。文件在编译后注释都不会出现在编译完的css文件中

	//例题1
	body {
	  color: #333; // 这种注释内容不会出现在生成的css文件中
	  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
	}
	//例题2
	body {
	  color /* 这块注释内容不会出现在生成的css中 */: #333;
	  padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;
	}

7. 混合器

混合器使用 @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;
	}
	
	/*编译后*/
	.notice {
	  background-color: green;
	  border: 2px solid #00aa00;
	  -moz-border-radius: 5px;
	  -webkit-border-radius: 5px;
	  border-radius: 5px;
	}
	

下面还有一种高级用法就是混合器传参

	/*定义带参混合器*/
	@mixin link-colors($normal, $hover, $visited) {
	  color: $normal;
	  &:hover { color: $hover; }
	  &:visited { color: $visited; }
	}

	/*传入参数*/
	a {
	  @include link-colors(blue, red, green);
	}
	
	/*编译后*/
	a { color: blue; }
	a:hover { color: red; }
	a:visited { color: green; }

8. 导入SASS文件

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
1. 文件拓展名是 .css；
2. 文件名以 http:// 开头；
3. 文件名是 url()；
4. @import 包含 media queries。
如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

	/*都会导入文件 foo.scss*/
	@import "foo.scss";
	@import "foo";

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。
例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。

	/*如下,导入的其实是 _colors.scss 文件*/
	@import "colors";
		

9. @media的用法比较简单直接上例题

	.sidebar {
	  width: 300px;
	  @media screen and (orientation: landscape) {
	    width: 500px;
	  }
	}
	
	/*编译后*/
	.sidebar {
	  width: 300px;
	}
	@media screen and (orientation: landscape) {
	  .sidebar {
	     width: 500px; 
	  } 
	}
	 

@media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and

	@media screen {
	  .sidebar {
	    @media (orientation: landscape) {
	      width: 500px;
	    }
	  }
	}
	
	/*编译后*/
	@media screen and (orientation: landscape) {
	  .sidebar {
	    width: 500px; 
	   }
	}
	

官方文档还有很多人性化用法 点击继续学习.