Sass的安装和常用命令

Sass的安装和常用命令

由于 Sass 的 LibSass 和 Ruby Sass 版本已被弃用 ，转为 Dart Sass 版本，以下以 Dart Sass 1.34.0 进行安装和常用命令的基本使用。

Sass的安装

• 使用node.js，通过npm安装

  npm install -g sass
  

• 检查Sass是否安装成功，并查看当前版本

  sass --version
  

  

Sass编译成CSS

1. 手动编译：

• 编译单个文件：
  index.scss：要编译的sass文件。
  index.css：编译生成的css文件。

  sass index.scss:index.css
  

• 编译多个文件：
  sass：要编译的sass文件目录，目录中有多个sass文件。
  css：编译生成的css文件目录，在目录中自动生成对应的css文件。

  sass sass:css
  

2. 自动编译：

• watch：监视样式的变化。

• sass和css分别是sass和css文件的目录。

• 当sass目录中存在子目录时，在子目录中存在要编译的sass文件，在编译后，css目录中自动添加对应的子目录和css文件

  sass --watch sass:css
  

其他命令

1. 是否编译后生成对应的map文件

• –[no-]source-map：[] 代表可选的。

• 写入可选参数时，表示不编译生成map文件。

• 不写可选参数时，表示正常编译生成map文件，即默认情况下可省略该命令。

  sass --watch sass:css --[no-]source-map
  

2. 生成CSS风格

在 Dart Sass 1.34.0 中存在 expanded 和 compressed 两种 CSS 风格

• expanded：表示扩展风格，即正常css显示的样式，默认模式。
• compressed：表示压缩风格，即打包压缩过后的css样式。

  sass --watch sass:css --style=expanded
  

  sass --watch sass:css --style=compressed