Sass是使用Ruby语言编写的css预处理语言，诞生于2007年。Sass, LESS, stylus等css预处理语言为css增加了编程语言的特性，能够让css可读性增强、更易于后期维护。
Sass和SCSS其实是同一种东西，我们平时都称之为 Sass，两者的区别在于：
- 文件扩展名不同，Sass 是以
.sass后缀为扩展名，而 SCSS 是以.scss后缀为扩展名 - 语法书写方式不同，如下，Sass 是以严格的缩进式语法规则来书写，不带大括号
{}和分号;，是类ruby的写法。而 SCSS 的语法是css3的超集，因此可以把现有的.css文件直接修改成.scss即可使用。
//Sass
body
font: 100% $font-stack
color: $primary-color
//SCSS
body {
font: 100% $font-stack;
color: $primary-color;
}
编译和输出方式
- 命令行编译：sass --watch sass/bootstrap.scss:css/bootstrap.css
- GUI工具编译：koala 是一款桌面程序，支持 less 、 sass 、 coffeescript 即时编译
- 自动化编译：使用grunt、gulp等
- 展开输出：sass --watch test.scss:test.css --style expanded {}会另起一行
- 嵌套输出：sass --watch test.scss:test.css --style nested
- 紧凑输出：sass --watch test.scss:test.css --style compact 每个样式写在一行
- 压缩输出：sass --watch test.scss:test.css --style compressed 生产环境使用
注释
我们说过SCSS的语法是CSS的超集，因此SCSS支持css注释风格：块注释/* comment */，该类型的注释会保留在编译后的文件中。
Sass还支持单行注释// commnet ，该类型的注释在编译后会被省略。
如果在块注释/*后面加一个感叹号，表示这是重要注释。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!
important comment
*/
变量
Sass变量以$开头
$width: 300px;
$height: 500px;
.sec{
widht: $widht;
height: $height;
}
计算
计算在一门计算机语言中是必须的，而css目前只有calc()支持运算，在Sass中扩充了计算功能。
body{
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
嵌套
Sass允许选择器进行嵌套。但要注意:hover的嵌套写法：
a {
:hover{
}
}
编译成=>
a :hover{ // 等同于a *:hover(a标签下所有子标签的hover)
}
可以使用父选择器的标识符&显式的标明：
a{
&:hover{
}
}
代码复用
@extend 继承
.error{
color: #f00;
}
.error-serious{
@extend .error;
border: 1px #f00
}
编译成=>
.error .error-serious{
color: #f00;
}
.error-serious{
border: 1px #f00;
}
@mixin 类似c语言的宏
@mixin col-6{
width: 50%;
float: left;
}
div{
@include col-6; // 通过@include方式条用
}
编译成=>
div{
width: 50%;
float: left;
}
@import 引入文件
css原生的@import指令有两大弊端：
- 必须放在代码最前面
- 当浏览器读到@import 指令的时候才会引入其他样式，这样页面处于阻塞状态，对性能不利
局部文件以_开头，比如_variables.scss，待其他文件引用它，引用时候可以忽略_，比如@import 'variables';
所有的sass导入文件都可以忽略后缀名.scss。
参考
- 慕课网 - Sass和Compass必备技能之Sass篇
- 慕课网 - Sass和Compass必备技能之Compass
- 阮一峰 - SASS用法指南
网友评论