DartSass的安装与使用

安装:

1. 使用npm install -g sass默认安装Dart版本的Sass编译器

监听文件, 实时编译:

1. sass --style=expanded  -w css:dist --no-source-map

1. 输出格式的选择:

1. scss提供了四种输出格式，在命令行中使用 --style 选项进行设置
   1. dart sass只支持expanded和compressed。

1.1. 四种输出格式:

1.2. :nested

nested是 scss默认的输出格式，选择器与属性等单独占用一行，缩进量与 scss文件中一致，每行的缩进量反映了其在嵌套规则内的层数。

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }
.p {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

1.3. :expanded

expanded输出像是我们平常手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}
.p {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

1.4. :compact

compact会将每条 css 规则归纳为一行。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.p { font-size: 10em; font-weight: bold; text-decoration: underline; }

1.5. :compressed

compressed会删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。

#main{color:#fff;background-color:#000}#main p{width:10em}.p{font-size:10em;font-weight:bold;text-decoration:underline}