SCSS和Sass的区别是什么

技术背景

Sass是一种CSS预处理器，它提供了比普通CSS更高级的语法特性。通过Sass编写的样式表会被程序处理，最终转换为常规的CSS样式表，但它本身并不扩展CSS标准。CSS变量在Sass中可以使用，但预处理器变量的功能更为强大。

Sass有两种语法：较新的SCSS（Sassy CSS）和较旧的原始缩进语法（也称为Sass）。

实现步骤

文件扩展名

SCSS：使用 .scss 扩展名。
Sass：使用 .sass 扩展名。

语法特点

SCSS

语法与CSS相似，几乎所有有效的CSS代码也是有效的SCSS代码。
使用花括号 {} 来表示代码块。
使用分号 ; 来分隔声明。
赋值符号为 :。
使用 @mixin 指令创建混合器，使用 @include 指令调用混合器。

Sass

语法类似于Ruby。
不使用花括号，通过缩进来表示代码块。
不使用分号。
赋值符号为 =。
使用 = 符号创建混合器，使用 + 符号调用混合器。

代码示例

SCSS示例

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Sass示例

$color: red
=my-border($color)
  border: 1px solid $color
body
  background: $color
  +my-border(green)

转换方法

可以使用 sass-convert 工具在两种语法之间进行转换：

# 将Sass转换为SCSS
$ sass-convert style.sass style.scss

# 将SCSS转换为Sass
$ sass-convert style.scss style.sass

核心代码

以下是SCSS和Sass实现相同功能的核心代码对比：

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// 混合器
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

Sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

// 混合器
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

编译后的CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
// 混合器
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

最佳实践

新手：对于刚接触CSS预处理器的新手，建议使用SCSS，因为其语法与CSS相似，容易上手。
项目中：可以根据项目的需求和团队成员的习惯来选择。如果项目中有较多的CSS代码，可以直接将其扩展为SCSS代码；如果团队成员熟悉Ruby或Python等语言，对缩进语法更适应，可以考虑使用Sass。
代码组织：可以将混合器和变量等复用性高的代码写在 .sass 文件中，将实际编译为CSS的代码写在 .scss 文件中。