SASS和SCSS有什么区别？

---

SASS是CSS的语言扩展，可以添加新功能，使编写样式表更容易。同时，Compass是一个基于SASS构建的框架，它提供了更多功能并简化了样式表的开发。

这意味着每个有效的CSS3样式表也是有效的SCSS。我们用于scss文件的扩展名是.scss。SCSS使用行的缩进而不是括号或分号来标识代码块。虽然不再是主要语法，但缩进语法将继续得到支持。使用缩进语法的文件使用扩展名.sass。

SASS和SCSS的功能

SASS

SASS是一个辅助工具，使编写CSS更容易和更高效。它提供了普通CSS中没有的更多功能。

一些主要功能如下：

• 变量− 我们可以复用存储的数据，这使得样式表更容易后期维护，我们还可以复用颜色和字体。

• 嵌套− 嵌套允许我们根据相关的选择器组织样式，这使我们更容易阅读和维护代码。

• Mixin− Mixin是SASS的关键特性。我们用它来组合许多CSS声明，使之更简洁，节省时间和精力，并在项目中重复使用它们。

• 继承− SASS的一个强大特性是继承。我们可以定义一组可以被其他选择器继承的样式，从而减少我们要编写的代码量。

• 控制指令− 在SASS中，控制指令和表达式可以在某些条件下包含样式，例如@if、@else和@for，允许我们在样式表中创建逻辑。

• @if, @else− 这些指令与javascript中的if和else条件语句相同。它用于执行表达式，而else用于检查if语句之前执行的表达式。

• @for− 它用于执行许多分组的语句。

SCSS

另一方面，SCSS也是CSS中一个强大的框架。

使用循环、变量和数学运算，SCSS帮助我们更简洁地编写CSS代码，从而使CSS编写更强大。

SCSS的一些主要功能如下：

• SCSS包含CSS的所有功能以及CSS中没有的更多功能，这使得SCSS更容易被开发者选择。

• SCSS鼓励嵌套规则。

• SCSS代码量少，因此我们可以快速编写。

• SCSS提供嵌套语法和函数，例如数学运算、颜色等等。

• 它更强大、更优雅，因为它是的CSS的扩展，使开发人员的工作更轻松快捷。

• 它可以管理多个嵌套样式和类。

• 它允许内联文档，例如我们可以在代码旁边添加注释。

SASS和SCSS的区别

现在让我们看看SASS和SCSS的主要区别：

关键特性	SASS	SCSS
语言	SASS是CSS的预处理器，通过添加新功能来扩展其功能。	SCSS也是预处理器，但功能不如SASS强大。
特性	SASS通过添加变量、嵌套、Mixin、继承和控制指令等新功能来扩展CSS的功能。	SCSS提供了嵌套语法和类。
语法样式	Sass使用缩进语法，与Haml相同。	SCSS使用类似CSS的语法，即块格式。
CSS兼容性	在SASS中，CSS不能用作SASS，SASS也不能用作CSS。	在SCSS中，如果代码在CSS中有效，它在SCSS代码中也自动有效。
社区支持	SASS拥有庞大的社区，包括来自全球的学生、开发者等等。	SCSS的社区较小，主要是一些开发者。
CSS分层嵌套	关于SASS，它支持嵌套功能，可以用来嵌套CSS选择器以在HTML中显示它们。否则，维护较大的嵌套CSS会更繁琐。	在SCSS中，它可以有效地维护多个类和不同类型的嵌套样式。

语法差异

语法上的主要区别在于SASS在其语法或代码中使用其功能。对于SCSS，它使用CSS功能，因为CSS和SCSS的功能相同。

SCSS语法

//SCSS
@mixin cover {
   $color: red;
   @for $i from 1 through 5 {
      &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
   }
}
.wrapper { @include cover }

SASS语法

//SASS
=cover
   $color: red
   @for $i from 1 through 5
      &.bg-cover#{$i}
         background-color: adjust-hue($color, 15deg * $i)
.wrapper
+cover

SASS示例

这里，我们使用SASS来定义变量和样式。我们为body元素定义了一些基本样式，包括背景颜色和字体系列。

接下来，我们将.header选择器嵌套在body选择器内，并为.header内的元素定义一些样式。

用户可以看到，在输出中，“&”符号在“&:hover”中将生成.header a:hover的选择器。

// variables
$base-color: #333;
$font-stack: "Helvetica Neue", sans-serif;
 
// styles
body {
   background-color: $base-color;
   font-family: $font-stack;
} 
//selectors
.header {
   background-color: #fff;
   a {
      color: $base-color;
      text-decoration: none;
      &:hover {
         text-decoration: underline;
      }
   }
}

输出

body {
   background-color: #333;
   font-family: "Helvetica Neue", sans-serif;
} 
.header {
   background-color: #fff;
} 
.header a {
   color: #333;
   text-decoration: none;
} 
.header a:hover {
   text-decoration: underline;
}

SCSS示例

/* .scss file */
$bgcolor: blue;
$textcolor: red;
$fontsize: 25px; 
/* Use the variables */
body {
   background-color: $bgcolor;
   color: $textcolor;
   font-size: $fontsize;
}

输出

body
{
   background-color: blue;

      color: red;
   font-size: 25px;
}
/* now this can apply the resulting HTML file */

结论

最后，SASS被替换或重命名为SCSS，添加了新的样式表并进行了一些修改，但是我们仍然可以使用旧版本的SASS。如果我们想要缩进，我们可以使用SASS；如果我们想要块文档，我们可以使用SCSS。