Sass

一、Sass简介

Sass是采用Ruby语言编写的一款CSS预处理语言，是最早的CSS预处理语言。最初它是配合HAML（一种缩进式HTML预编译器）而设计的，因此有着和HTML一样的缩进风格。

虽然缩进式代码风格可以有效缩减代码量，强制规范编码风格，但是它一方面并不为大多数程序员接收，另一方面无法兼容已有的CSS代码。

Sass从第三代开始，放弃了缩进式的风格，并且完全向下兼容普通的CSS代码，这一代Sass也被称为SCSS。

二、Sass安装与使用

1、安装Ruby。
2、Ruby安装完成后，使用gem系列命令安装Ruby的插件和扩展，在终端输入gem install sass进行安装，安装完成后就可以使用sass命令了。

具体安装过程请参加：https://blog.csdn.net/kai_vin/article/details/90763326

三、使用变量

Sass的变量关键字和PHP一样，都是以一个美元符号$开头，示例：

$blue: #1875e7;
div {
	color: $blue;
}

Sass还支持变量内嵌在字符串中，由于Sass是Ruby语言编写的，其和Ruby一样，使用#{}进行包裹。
示例：

$side: left;
.rounded {
	border-#{$side}-radius: 5px;
}

四、计算

和Less一样，Sass允许直接在代码中编写算式，并且支持变量和函数，例如：

$width: 100px;
body {
	margin: (14px / 2);
	padding: pi()px;
	top: 50px + 100px;
	right: $width * 10%;

五、使用@import导入

@import可以用来插入外部文件，示例：

@import "path/filename.scss";

注意：@import的顺序和先后有关，权重比较高的文件应该放在靠后的位置引入。

六、使用@extend继承

Sass支持编程语言中的继承概念，具体到可以通过@extend关键字来继承一个已有定义。
示例：

.class {
	border: 1px solid black;
}
.other {
	@extend .class;
	font-size: 120%;
}

七、使用@mixin混入

使用@mixin命令，可以定义一个代码块，示例：

@mixin float_left {
	float: left;
	margin-left: 10px;
}

使用@include命令调用这个mixin:

div {
	@include float_left;
}

与Less一样，Sass的Mixin也支持参数。

八、使用@function定义函数

Sass允许编写自己的函数，示例：

@function double($n) {
	@return $n * 2;
}
#side {
	width: double(5px);
}

九、控制语句

Sass可以使用@if、@else、@while来控制语句。
1、使用@if进行判断：

p {
	@if 1 + 1 == 2 {border: 1px solid;}
	@if 5 < 3 {border: 2px dotted;}
}

2、使用@else命令：

@if lightness($color) > 30% {
	background-color: #000;
}@else {
	background-color: #fff;
}

3、for循环

@for $i from i to 10 {
	.border-#{$i} {
		border: #{$i}px solid blue;
	}
}

4、while循环

$i: 6;
@while $i > 0 {
	.items-#{$i} {width: 2em * $i;}
	$i: $i - 2;
}

5、each命令

@each $me in a,b,c,d {
	.#{$me} {
		color: #000;
	}
}

十、总结

Sass相比于Less更为强大，如支持分支和循环操作、支持自定义函数。