sass简单介绍与使用

sass介绍与的使用

sass介绍

sass是一个css扩展语言，使用sass写样式时，不是直接创建 .css文件，而是创建一个.scss文件，按照sass特定的语法格式来写样式， 写完样式之后，再将 .scss文件执行一次编译， 生成 .css文件。 所以 sass又称为css的预编译语言
sass的优点 
  1.声明变量
  2.css 嵌套写法
  3.其它高级特性（参考后面sass高级语法）

sass的安装

1. 先安装ruby（1. 装在c盘， 2. 初始界面有一个选择编码的选项一定要勾上）
2. 打开命令行 win+r 输入cmd， 输入ruby -v, 如果看到版本号，就说明安装成功了
3. 安装sass：  gem install sass, 安装成功之后， sass -v， 如果能看到版本号，就说明安装成功了
4. 安装compass： gem install compass
5. 重启vscode， 拖出终端工具。 进放到你的项目文件夹 
 1.在项目文件夹创建一个sass文件夹
 2. 在sass文件夹里创建scss文件
 3. 在终端里在， 执行 sass --watch sass:css --style expanded
 4.如果想要结束监听， ctrl+c， 按一个Y

sass的使用

1. 创建一个sass文件夹
    > 在sass文件夹中创建一个 .scss文件， 比如说 index.scss
2. 创建一个css文件夹
3. 在index.scss中写样式
4. 执行编译， 会自动生成 index.css文件, 在html中，引入 index.css文件即可

sass的监听编译

单文件转换命令, 手动编译， 执行一次，编译一次
sass input.scss output.css

单文件监听命令， 自动编译， 执行以下命令以后，每保存一次，就会自动编译
sass --watch input.scss:output.css

如果你的sass文件夹里有很多scss文件， 可以监听文件夹，只要是该文件夹中的scss文件发生了修改， 都会自动编译， 下面的命令是把sass文件里的scss文件自动编译到 css文件夹里成生对应的 css文件
sass --watch sass:css

编译后生成的css的四种排版格式

sass --watch input.scss:output.css --style compact //单行版本
sass --watch input.scss:output.css --style nested //缩进版本
sass --watch input.scss:output.css --style expanded //正常编写css的版本
sass --watch input.scss:output.css --style compressed //压缩版本
sass --watch input.scss:output.css --style expanded --sourcemap //sourcemap会生成一个map文件，map文件记录了某一行css文件在编译前的scss文件中的位置，有助于调试

详情请参阅官方的文档（https://www.sass.hk/install/）