使用sass总结

上个学期就开始用sass写项目了，当时想完完全全的看一遍sass的代码内容，半途而废。这次写项目再次用到sass，想把一些可能会用到的特性总结一下
以下是我项目中用的比较多，或者个人觉得比较重要的特性。

1、可嵌套性（这个是基础，用的太多太多了，必须掌握）

Sass 中提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。

2、变量：变量以$开头

通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给一个变量，以后调用变量就好了，很类似js里的变量

3、混合宏：@mixin

如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。可重用性高，可以注入任何东西 　　　　　　
注意点：

• 可以相互调用，但是不能拿自己调用自己，形成递归
• 通过@include引用

例子：

@mixin banner {                　　　　　　　　　　
   width: 100%;                　　　　　　　　　　
   position: relative;                　　　　　　　　　　
   color: $deeepBlue;                　　　　　　　　　　
   .banner-content {                    　　　　　　　　　　　　
   	position: absolute;                    　　　　　　　　　　　　
   	top: 50px;                    　　　　　　　　　　　　
   	width: 100%;                　　　　　　　　　　
   }	            　　　　　　　　
}            　　　　　　　　
.lead-banner {                　　　　　　　　　　
@include banner;            　　　　　　　　
}

4、@extend：允许一个选择器继承另一个选择器

例子:

.a1 {                　　　　　　　　　　
	color: blue;            　　　　　　　　
}            　　　　　　　　
.a2 {                　　　　　　　　　　			
	@extend .a1;                　　　　　　　　　　
	font-size: 12px;            　　　　　　　　　　
}

5、引用父元素&：在编译时，&将被替换成父选择符（常用）

例子:

a {                    　　　　　　　　　　
	font-size: 20px;                    　　　　　　　　　　
	text-decoration: none;                    　　
	&:hover {                        　
		text-decoration: underline;                    　　
	}                　　　　　　　　
}            　　　　　　

编译后:

a {                    　　　　　　　　　　
	font-size: 20px;                    　　　　　　　　　
　	text-decoration: none;                　　　　　　　　　
}                　　　　　　　　
a:hover {                    　　　　　　　　　　
　	text-decoration: underline;                　　　　　　　　　
}

6、计算功能（会用 但是不多吧）

例子:

p {                　　　　　　　　　　
	margin: 20px + 30px;                　　　　　　　　　　
	width: (100% / 6)；            　　　　　　　　
}        　　　

编译后：

p {                　　　　　　　　　　
	margin: 50px;                　　　　　　　　　　
	width: 16.6666666667%;            　　　　　　　　
}

7、function:函数功能，用户使用@function可以去编写自己的函数（不是特别常用）

使用语法： 使用 @function+函数名称，每个函数都需要有返回值的内容 　　　　　　
例子:

@function du($r) {                    　　　　　　　　　　
	@return $r*2                　　　　　　　　
}                　　　　　　　　
.a8 {                    　　　　　　　　　　
	border: solid #{du(2)}px red;                　　　　　　　　
}    　

8、组合连接： #{} ： 变量连接字符串（不是特别常用）

例子：

$name: foo;            　　　　　　　　
$attr: border;            　　　　　　　　
p.#{$name} {                　　　　　　　　　
	#{$attr}-color: blur;            　　　　　　　　
}      　　　　

被编译为：

p.foo {                　　　　　　　　　　
   border-color: blur;            　　　　　　　　
}    　　　　

9、循环语句：（很少用到）

例子：

@for $i from 1 to 10 {                　　　　　　　　　　
   .a5_img#{$i} {                    　　　　　　　　　　　　
   	background-image: url('images/img#{$i}.png');     　
   }            　　　　　　　　
}            　　　　　　　　
@while $j>0  {                　　　　　　　　　　
   .a5_img#{$j} {                    　　　　　　　　　　　　
   background-image: url('images/img#{$j}.png');     
   }                　　　　　　　　　　
   $j:$j - 1;            　　　　　　　　
}            　　　　　　　　
@each $item in 1,2,3,4,5 {                　　　　　　　　　　
   .a5_img#{$item} {                    　　　　　　　　　　　　
   background-image: url('images/img#{$item}.png');     　　
   }            　　　　　　　　
}    　　　　

10、if语句：（很少用到）

例子：

@mixin bgcolor($b) {                　　　
	@if($b==5) {                    　　　　　
		background-color: #fff;                　　
	} @else if($b == 6) {                    　　　　　　　
		background-color: green;                　　　　　　　　　　
	} @else {                    　　　　　
		background: blue;                　　　　　　
	}            　　　　　　　
}

总结

• 目前用的最多的或者个人觉得比较重要点，以后可能会用到的大概是这10个吧，sass还有其他的特性，但是就目前来说使用频率不高。
• 还有一点需要注意，引用sass是使用@import，sass编译有一个特点，就是当一个sass或scss的文件名以下划线_开头，那么这个文件就不会被编译。
• sass与scss的区别：（其实是一种东西）
  1. scss是sass3引入的新语法，语法完全兼容css3， 继承了sass的功能
  2. scss和sass大部分语法相同，唯一不同的是，scss需要使用分号和花括号，sass是以严格的缩进式语法缩写—换行和缩进
  3. 文件扩展名不同