SASS/SCSS快速入门

Overview

1. 什么是Sass?
2. Sass与SCSS的区别？
3. Sass的特性？
4. Sass编译后的四种CSS输出风格？
5. 如何实现Sass自动编译？
6. Sass的基本语法。
7. 常见的使用技巧。
8. 相关工具。

1. 什么是Sass

1.1 Sass是由Ruby编写的一种CSS预处理语言（CSS Preprocessor）。作为CSS的扩展，具有CSS没有的特性，更靠近JS的机制，可经过编译（Compile）后变成CSS文件。

1.2 后缀名是**.scss**(Sassy CSS)

2. Sass与SCSS的区别
SCSS是Sass 3引入的新语法。

3. Sass的几大特性

1. 可使用变量 Varible
2. 可嵌套 Nesting
3. 可继承 Inheritance
4. 可计算

4. SCSS编译后的四种CSS输出风格

1. nested 嵌套。默认值

2. expanded 扩展。推荐此格式，便于阅读，符合一般CSS编写风格。

3. compact 紧凑。

4. compressed 压缩。体积最小，适合在生产环境当中使用。

5. Sass自动的编译
通过监听某个文件或目录，当目标有变动时就自动编译生成CSS。

// watch a file，生成的CSS摆放到指定路径
sass --watch input.scss:output.css

// watch a directory
sass --watch app/sass:public/stylesheets

6. Sass的基本语法

Notice: 注意冒号和结尾的分号

符号

@ 针对与使用Sass自带的关键字

继承
重用
//插入：@import命令，用来插入外部文件。
@import "path/filename.scss";

#

$ 当变量定义在css规则块内，那么该变量只能在此规则块内使用。

//声明变量
$variable:指定值
//使用变量
$variable
#｛$variable｝

变量名可用中划线或下划线进行分隔，取决于个人的喜好，使用中划线的方式更为普遍，这也是compass和本文都用的方式。
其实两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。

当变量需要镶嵌在字符串之中，就必须需要写在#{}之中

//SCSS
$value1 : left
margin-#{$value1} : 20px

//CSS
margin-left : 20px

%
&**

//在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
　　a {
　　　　&:hover { color: #ffb3ff; }
　　}

注释

单行注释 // comment，只保留在Sass源文件中，编译后被省略。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!
　　　　重要注释！
　　*/

7. 常见的使用技巧

1. @minxin 与 @placeholder (优缺点)
2. @mixin通过@include调用
3. @placeholder通过@extend调用
4. .className 与 %placeHolder
5. Sass与ES6的剩余参数
6. 什么时候 @extend 一个样式类，什么时候 @extend 一个占位符

8. 相关工具

1. 官方在线转换器： https://www.sassmeister.com/
2. 官方介绍：
3. VS Code 插件：Live Sass Compiler