sass是css预处理器
sass是基于ruby，使用sass需要安装ruby
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
- 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
- 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
MacOS系统安装步骤
1. brew install ruby
2. gem install sass //gem是ruby包管理工具，就像nodejs的npm一样
Windows系统安装步骤
1. 上官网下载ruby安装包
2. 安装完成打开 ruby命令行，或者把ruby添加到环境变量中
3. 安装sass ， gem install sass
在命令行中 sass -v 输入版本信息表示安装成功
写一个demo文件
```scss
$width
:
200px
;
//$+名称 表示变量，: 赋值
$height
:
200px
!default
;
//!default 表示默认值
$height
:
100px
;
//重复赋值直接覆盖掉默认值
.demo
{
width
:
$width
;
height
:
$height
;
}
//清楚浮动样式，伪类嵌套
.clearfix
{
&
::before
,
// & 表示引用上一层的选择器
&
::after
{
content
:
""
;
display
:
table
;
}
&
::after
{
clear
:
both
;
overflow
:
hidden
;
}
}
.nav
{
$width
:
30px
;
$height
:
20px
;
a
{
li
{
list-style
:
none
;
text-decoration
:
none
;
font
: { //属性嵌套，font-size,font-weight
size
:
18px
;
weight
:
500
;
}
}
.header
&
{
cursor
:
pointer
;
}
}
.header
&
{
text-align
:
center
;
}
}
```
cli编译sass
输入命令编译 sass --watch test.scss
加 --style 可以选择不同风格的输出方式，见下文
生成的css文件
```css
.demo
{
width
:
200px
;
height
:
100px
; }
.clearfix::before, .clearfix::after
{
content
:
""
;
display
:
table
; }
.clearfix::after
{
clear
:
both
;
overflow
:
hidden
; }
.nav a li
{
list-style
:
none
;
text-decoration
:
none
;
font-size
:
18px
;
font-weight
:
500
; }
.header .nav a
{
cursor
:
pointer
; }
.header .nav
{
text-align
:
center
; }
/*# sourceMappingURL=test.css.map */
``
[Sass]不同样式风格的输出方法
众所周知，每个人编写的 CSS 样式风格都不一样，有的喜欢将所有样式代码都写在同一行，而有的喜欢将样式分行书写。在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格：
- 嵌套输出方式 nested
- 展开输出方式 expanded
- 紧凑输出方式 compact
- 压缩输出方式 compressed
---
笔记写得比较匆忙，各位看官见谅，有问题可以留言评论，或者私信，看到一定回复