Sass前言 Sass 是什么? Sass是一个功能强大的专业级CSS扩展语言为什么要学习 Sass ? 根据 W3C

前言

Sass 是什么?

Sass是一个功能强大的专业级CSS扩展语言

为什么要学习 Sass ?

根据 W3C标准网页有三部分组成：结构+表现+行为。（常用）分别对应着 HTML + CSS +Javascript 。Sass让CSS有了动态语言的特点，有了Sass，在css语法的基础上不仅可以写变量、函数，而且可以转换为标准的css。，降低了工作量，提高了效率。项目中也使用到了Sass。下面记录学习过程

保持sass条理性和可读性的最基本的三个方法：嵌套、导入和注释

使用变量

变量声明（和一般变量声明类似只不过变量用$开头）


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

变量引用（同样引用的时候也要以$开头）


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

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

变量名用中划线还是下划线分隔


	$link-color: blue;
	a {
	  color: $link_color;
	}
	
	//编译后
	
	a {
	  color: blue;
	}

嵌套CSS规则


	#content {
	  artcle {
	    h1 {
	      color: #333;
	    }
	    p {
	      margin-bootm: 1.4em;
	    }
	  }
	
	  aisde {
	    background-color: #eee;
	  }
	}

	
	 /* 编译后 */
	#content article h1 { color: #333 }
	#content article p { margin-bottom: 1.4em }
	#content aside { background-color: #EEE }
 	//省去了重复编写选择器

父选择器标识符 & （替换父选择器）


	1. 伪类选择器的时候使用
	article a {
	  color: blue;
	  :hover { color: red }
	}
	
	
	article a {
	  color: blue;
	  &:hover { color: red }
	}
	这里 &被直接替换为父选择器
	需要的是 article a:hover { color: red } 
	而不是  	article a :hover { color: red } 
	添加 &
	2. 在父选择器之前添加选择器
	
	  #content aside {
	  color: red;
	  body.ie & { color: green }
	}
	
	/*编译后*/
	#content aside {color: red};
	body.ie #content aside { color: green }

群组选择器的嵌套（减少重复的编写工作）


	这是群组选择器 常规的写法
	.container h1, .container h2, .container h3 { margin-bottom: .8em }
	简写后
	.container {
	  h1, h2, h3 {margin-bottom: .8em}
	}

子组合选择器和同层组合选择器：>、+和~ （嵌套的一种写法）


	article {
	  ~ article { border-top: 1px dashed #ccc }
	  > section { background: #eee }
	  dl > {
	    dt { color: #333 }
	    dd { color: #555 }
	  }
	  nav + & { margin-top: 0 }
	}
	
	编译后
	article ~ article { border-top: 1px dashed #ccc }
	article > footer { background: #eee }
	article dl > dt { color: #333 }
	article dl > dd { color: #555 }
	nav + article { margin-top: 0 }

嵌套属性


	nav {
	  border: {
	  style: solid;
	  width: 1px;
	  color: #ccc;
	  }
	}
	
	
	编译后
	nav {
	  border-style: solid;
	  border-width: 1px;
	  border-color: #ccc;
	}
	
	
	nav {
	  border: 1px solid #ccc {
	  left: 0px;
	  right: 0px;
	  }
	}
	
	编译后
	nav {
	  border: 1px solid #ccc;
	  border-left: 0px;
	  border-right: 0px;
	}

嵌套属性的规则：

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

导入Sass文件

与常规css导入不同的是 css 只有在执行到@import 时浏览器才会去下载其它的css文件而sass的import规则在生成css文件时就把相关文件导入进来，不需要发起额外的下载请求

使用Sass 部分文件（局部文件）

Sass局部文件特殊的约定：

以下划线开头
@import局部文件时，可以不写文件的全名（省略文件名开头的下划线）

例：


	导入themes/_night-sky.scss这个局部文件里的变量
	在样式表中直接写@import "themes/night-sky";

默认变量值 (!default 设置变量的默认值)


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

嵌套导入

局部文件 _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;
	  }
	}

原生的CSS导入（Sass 支持原生的CSS导入）

Sass兼容原生的css，所以也支持原生的CSS@import 一般情况下Sass会尝试找到对应的Sass文件并导入进来

但下列情况会生成原生的CSS@import:

被导入文件的名字以.css结尾
被导入文件的名字是一个URL地址（比如www.sass.hk/css/css.css…
被导入文件的名字是CSS的url()值。

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

文件导入是保证sass的代码可维护性和可读性的重要一环。次之但亦非常重要的就是注释了。注释可以帮助样式作者记录写sass的过程中的想法。在原生的css中，注释对于其他人是直接可见的，但sass提供了一种方式可在生成的css文件中按需抹掉相应的注释。

静默注释

**静默注释：**在生成的css代码中看不到注释

例：


	body {
	  color: #333; // 这种注释内容不会出现在生成的css文件中
	  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
	}
	
	css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。
	
	body {
	  color /* 这块注释内容不会出现在生成的css中 */: #333;
	  padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;
	}

混合器

**作用：**通过混合器实现大段样式的重用

混合器定义用 @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;
	}

什么时候使用混合器？

重复编写的样式或者这段样式是一个逻辑单元（能够想出一个好名字）

混合器中的css规则


	// 定义混合器
	@mixin no-bullets {
	  list-style: none;
	  li {
	    list-style-image: none;
	    list-style-type: none;
	    margin-left: 0px;
	  }
	}
	//调用混合器
	ul.plain {
	  color: #444;
	  @include no-bullets;
	}
	//最终生成
	ul.plain {
	  color: #444;
	  list-style: none;
	}
	ul.plain li {
	  list-style-image: none;
	  list-style-type: none;
	  margin-left: 0px;
	}

混合器传参（像函数一样使用就行）

	//像函数一样定义
	@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; }

默认参数值


	//赋一个默认值 这里注意不是 = 号
	@mixin link-colors(
	    $normal,
	    $hover: $normal,
	    $visited: $normal
	  )
	{
	  color: $normal;
	  &:hover { color: $hover; }
	  &:visited { color: $visited; }
	}
	//调用
	
	@include link-colors(red)

使用选择器继承来精简CSS

继承使用： @extend + 选择器名字


	//通过选择器继承继承样式
	.error {
	  border: 1px solid red;
	  background-color: #fdd;
	}
	.seriousError {
	  @extend .error;
	  border-width: 3px;
	}

关于@extend有两个要点你应该知道：

跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。