sass学习笔记，sass学习入门，只需要30分钟就可以搞定sass
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
---
笔记写得比较匆忙，各位看官见谅，有问题可以留言评论，或者私信，看到一定回复