:::info Css的辅助代码，能使用变量、嵌套、混合、导入等功能，让CSS更优雅且具备逻辑感，记住人家的标语：“世界上最成熟、最稳定、最强大的专业级CSS扩展语言！”
这玩意开始入手容易蒙圈，开始可以直接使用工具下面有Hbulider和vsCode的配置，没必要去安装环境和工具 :::

1.安装

1.安装Ruby环境，安装时勾选Add Ruby executables to your PATH以免编译时提示找不到Ruby环境 2.安装完成打开Start Command Prompt with Ruby 3.https://ruby.taobao.org`` $ gem install sass 4.编译sass为css、四种编译风格：nested（默认：代码缩进）、expanded（不缩进）、compact（简介格式）、compressed（压缩模式，生产用这个）。写法：sass --style compressed style.sass style.css 4.1:可以用工具：koala

监听：文件改变后自动编译：单文件监听命令： sass --watch input.scss:output.css、 文件夹监听命令sass --watch app/sass:public/stylesheets CSS转SASS: sass-convert style.css style.sass 在线工具：https://www.sass.hk/css2sass/

2.注释：支持/ /（这样写css里会生成）和//（css中不会生成）

3.工具：

Hbulider

安装：工具->插件安装->sass 可能会缺少二进制文件-下载地址：https://github.com/sass/node-sass/releases 修改保存时编译和生成的css文件：文件上右键->外部命令->sass/scss编译->插件配置->package.json

  1. ...        
  2. "commands": [
  3.   {
  4.     "id": "SASS_COMPILE",
  5.     "name": "%SASS_COMPILE.name%",
  6.     "command": [
  7.       "${programPath}",
  8.       "${file}",
  9.       "../css/${fileBasename}.css"//编译文件的路径和名称
  10.     ],
  11.     "extensions": "scss,sass",
  12.     "key": "",
  13.     "showInParentMenu": false,
  14.     "onDidSaveExecution": true//保存时编译
  15.   }
  16. ]
  17. ...

优势：主要是Hbulider开发前端顺手就sass来说不如vscode更舒服
缺点：不能生成min.css

VsCode

安装：安装插件SASS（代码提示工具）、EASY SASS(编译工具) 修改文件生成的CSS文件路径： image.png

  1. "easysass.formats": [ 
  2.         //nested：嵌套缩进的 css 代码。
  3.         //expanded：没有缩进的、扩展的css代码。
  4.         //compact：简洁格式的 css 代码。
  5.         //compressed：压缩后的 css 代码
  6.         {
  7.             "format": "expanded",
  8.             "extension": ".css" //设置编译输出的文件名
  9.         },
  10.         {
  11.             "format": "compressed",
  12.             "extension": ".min.css" //设置编译输出的文件名
  13.         }
  14.     ],
  15.     "easysass.targetDir": "./css/" //提供 css 输出路径的设置（可以是绝对路径或者相对路径）