SCSS和Sass有什么区别？

2018-06-09 21:58:54

从我一直在阅读的内容来看，Sass是一种让CSS变得更强大的语言，它支持变量和数学。

SCSS有什么不同？它应该是同一种语言吗？类似？不同？

Sass是一款具有语法改进功能的CSS预处理器。高级语法中的样式表由程序处理，并转换为常规的CSS样式表。但是，它们本身不会扩展CSS标准。

这样做的主要原因是增加了CSS痛苦缺乏的功能（如变量）。

Sass文档页面上的SCSS和Sass之间的区别应该回答以下问题：

有两种语法可用于Sass。第一种称为SCSS（Sassy CSS），用于整篇引用，是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。这个语法通过下面描述的Sass特性得到了增强。使用此语法的文件具有.scss扩展名。

第二个和更老的语法 ，被称为缩进语法（或者有时候只是“Sass”），提供了一种更简洁的编写CSS的方式。它使用缩进而不是括号来指示选择器的嵌套，而使用换行符而不是分号来分隔属性。使用此语法的文件具有.sass扩展名。

但是，所有这些只适用于最终创建CSS的Sass预编译器。它不是CSS标准本身的扩展。

我是帮助创建Sass的开发人员之一。

不同的是UI。在文字外观下面，它们是相同的。这就是为什么sass和scss文件可以导入对方。实际上，Sass有四种语法分析器：scss，sass，CSS和less。所有这些将不同的语法转换为抽象语法树，通过sass转换工具将其进一步处理为CSS输出或甚至其他格式之一。

使用你最喜欢的语法，两者都得到完全支持，如果你改变了主意，以后可以在它们之间进行更改。

在萨斯.sass文件是从视觉上不同.scss文件，例如：

example.sass

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

example.scss

$color: red;

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

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

只需将扩展名从.css改为.scss即可将任何有效的CSS文档转换为Sassy CSS（SCSS）。

链接地址: http://www.djcxy.com/p/29485.html