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