Sass 用法小结

sass 是 css 的扩展语言。

sass 有两种后缀名
• .sass：对空格敏感，不使用花括号，不使用分号，语句之间通过换行来分隔，语法风格类似 Ruby。
• .scss：与传统 css 文件有很大的相似之处，容易上手。

---

使用 koala 直接对 sass 文件进行实时编译。

语法介绍

变量：
变量定义在文件的行首，格式如下：
$name: value;
例：

...
header-ff: Microsoft YaHei;
...
.header {
	font-family:header-ff;
	color:#f00;
}
...

这样以后可以直接在变量中修改。

所有变量可以保存在一个统一的文件中，文件格式是 .scss ，如果是局部文件，则在名字前面加下划线“_” 。
例：_all-value.scss

引入文件的方法： @import "all-value";
需要注意的是：

• 当文件没有后缀名的时候，sass 会尝试为其添加 .sass 或 .scss 的后缀名，路径中存在的文件所决定
• 同一个目录下，局部文件和非局部文件不能重名，所以可以省略前面的下划线

在 css 中也存在 @import 指令，但是 css 原生引入指令有两大弊端：

• 必须在代码最前边，否则将不起作用
• 浏览器按顺序下载解析，延长渲染时间，影响性能

sass 对指令进行了改进:

• 编译阶段将被引入文件合并，并输出到了相应的 css 文件
• @import 指令可以用在文档的任何地方

但是，sass 如何分辨这里的指令是不是原生的 @import 呢？sass 有一套规则来使用 css 原生 @import ：

• 当 @import 后面文件的后缀名是 .css 的时候
• 当 @import 后面是以 http:// 开头的时候
• 当 @import 后面是一个 url() 函数的时候
• 当 @import 后面带有 media queries 的时候

满足以上任意一条，sass 就使用原生 css 原生指令。

注释：
sass 支持/* 块注释 */和// 行注释
块注释会在 css 文件中体现
行注释只会有一个提示信息，告诉注释内容在原 scss 文件中的位置

嵌套写法：

.header {
	width: 1000px;
	height: 100px;
	position: relative;

	.nav {
		width: 100%;
		height: 50px;
		position: absolute;
		bottom: 0;
	}
}

:hover 样式：
错误写法：

a {
	hover {
		color: f00;
	}
}

这样写所生成的内容是 a *:hover ，意思是 a 链接中所有元素的 hover 效果。

正确写法应该是：

a {
	&:hover {
		color: f00;
	}
}

&代表父选择器

属性嵌套：
css 写法：

a {
	font-family: Microsoft YaHei;
	font-size: 12px;
}

sass 嵌套写法：

a {
	font:{
		family: Microsoft YaHei;
		size: 12px;
	}
}