SCSS和Sass有什么区别？

据我所知，Sass是一种通过变量和数学支持使CSS更强大的语言。

与SCSS有什么区别？它应该是相同的语言吗？相似？不同？

1064942 次浏览
小开
最佳答案

Sass是一个具有语法改进的CSS预处理器。高级语法中的样式表由程序处理，并变成常规的CSS样式表。但是，它们确实没有扩展了CSS标准本身。

支持CSS变量，可以使用，但不如预处理器变量。

对于SCSS和Sass之间的区别，Sass留档页上的这段文字应该回答这个问题：

Sass有两种可用的语法。第一种语法称为#0，并在本参考中使用，是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。这种语法通过下面描述的Sass特性得到增强。使用这种语法的文件具有. scss扩展名。

第二个和旧语法，称为#0，提供了一种更简洁的编写CSS的方式。它使用缩进而不是括号表示选择器的嵌套，换行符而不是分号表示分离属性。使用这种语法的文件具有. sass扩展名。

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

小开

从语言的主页

Sass有两种语法。新的main语法（从Sass 3开始）被称为“SCSS”（用于“Sass CSS”），并且是一个CSS3语法的超集。这意味着每个有效的CSS3样式表都是有效的SCSS。SCSS文件使用扩展名. scss。

第二种较旧的语法称为缩进的语法（或只是“Sass”）。受到Haml简洁的启发为那些喜欢与CSS相似的简洁性。而不是括号和分号，它使用行的缩进来指定块。虽然不再是主语法，缩进语法将继续得到支持。文件在缩进语法中使用扩展. sass。

SASS是一种解释吐出CSS的语言。Sass看起来的结构类似CSS（远程），但在我看来，描述有点误导；它是没有 CSS的替代品或扩展。它是一个最终吐出CSS的解释器，所以Sass仍然有普通CSS的局限性，但它用简单的代码掩盖了它们。

小开

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

不同之处在于语法。在文本外观之下，它们是相同的。这就是为什么sass和scss文件可以相互导入。实际上，Sass有四个语法解析器：scss、sass、CSS等等。所有这些都将不同的语法转换为抽象语法树，然后进一步处理为CSS输出，甚至通过sass-转换工具转换为其他格式之一。

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

小开

基本区别在于语法。虽然SASS具有带有空格且没有分号的松散语法，但SCSS更类似于CSS。

小开

Sass.sass文件与.scss文件在视觉上不同，例如。

Example.sass-sass是较旧的语法

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

Example.scss-sass css是Sass 3的新语法

$color: red;
@mixin my-border($color) {border: 1px solid $color;}
body {background: $color;@include my-border(green);}

任何有效的CSS文档都可以通过将扩展名从.css更改为.scss来转换为Sass CSS（SCSS）。

小开

Sass是第一个，语法有点不同。例如，包含一个混合：

Sass: +mixinname()Scss: @include mixinname()

Sass忽略了花括号和分号，并使用嵌套，我发现这更有用。

小开

它的语法是不同的，这是主要的优点（或缺点，取决于你的观点）。

我会尽量不重复别人说的话，你可以很容易地用谷歌搜索，但相反，我想从我使用两者的经验中说几件事，有时甚至在同一个项目中。

sasspro

  • 更干净-如果你来自Python，Ruby（你甚至可以用类似符号的语法编写道具）甚至CoffeeScript世界，这对你来说将是非常自然的-在.sass中编写混合，函数和通常任何可重用的东西比在.scss（主观）中“更容易”和可读性。

sass cons

  • 空白敏感（主观），我不介意在其他语言中使用它，但在CSS中它只是困扰着我（问题：复制，制表符与太空战争等）。
  • 没有内联规则（这对我来说是游戏破坏），你不能像在. scssbody {color: red}中那样做body color: red
  • 导入其他供应商的东西，复制普通的CSS片段——这并非不可能，但一段时间后非常无聊。解决方案是在项目中包含.scss文件（与.sass文件一起）或将它们转换为.sass。

除此之外，他们做同样的工作。

现在，我喜欢做的是在.sass中编写混合和变量，如果可能的话，在.scss中实际编译为CSS的代码（即Visual Studio不支持.sass，但每当我在Rails项目上工作时，我通常会组合其中的两个，而不是在一个文件ofc中）。

最近，我正在考虑给手写笔一个机会（一个全职的CSS预处理器），因为它允许你在一个文件中组合两种语法（以及其他一些功能）。这对团队来说可能不是一个好的方向，但是当你单独维护它时——没关系。当语法有问题时，手写笔实际上是最灵活的。

最后混合.scss vs.sass语法比较： 

// 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=cover$color: red@for $i from 1 through 5&.bg-cover#{$i}background-color: adjust-hue($color, 15deg * $i).wrapper+cover
小开

萨斯（语法上很棒的样式表）有两个语法：

  • 更新：SCSS（时髦的CSS）
  • 和一个较旧的原始：缩进语法，它是原始的萨斯，也称为萨斯。

因此，它们都是萨斯预处理器的一部分，具有两种不同的可能语法。

SCSS和原始萨斯之间最重要的区别：

SCSS：

  • 语法类似于css（以至于每个正则有效的CSS3也有效SCSS，但另一个方向的关系显然不会发生）

  • 使用大括号{}

  • 使用分号;

  • 赋值符号为:

  • 要创建混合，它使用@mixin指令

  • 要使用混合，它在@include指令之前

  • 文件扩展名为. scss。

原萨斯：

  • 语法类似于ruby
  • 没有牙套
  • 无严格缩进
  • 不要用分号
  • 赋值符号是=而不是:
  • 要创建一个混合，它使用=符号
  • 要使用混合，它前面有+符号
  • 文件扩展名为. sass。

有些人更喜欢萨斯，原始语法-而其他人更喜欢SCSS。无论哪种方式，但值得注意的是萨斯的缩进语法没有也永远不会被弃用（网络存档）。

使用sass-转换进行转换：

# Convert Sass to SCSS$ sass-convert style.sass style.scss
# Convert SCSS to Sass$ sass-convert style.scss style.sass

Sass和SCSS留档

小开

原来的sass是ruby语法，类似于ruby，玉等…

在这些语法中，我们不使用{}，而是使用空格，也没有使用;…

在scss语法更像CSS，但有更多的选项，如：嵌套，声明等，类似于less和其他预处理CSS…

它们基本上做同样的事情，但我放了几行来查看语法差异，看看{}、;和spaces：

SASS：

$width: 100px$color: green
divwidth: $widthbackground-color: $color

SCSS：

$width: 100px;$color: green;
div {width: $width;background-color: $color;}
小开

SASS和SCSS的区别文章解释了细节上的差异。不要被SASS和SCSS选项迷惑，尽管我最初也是，. scss是Sass CSS，是. sass的下一代。

如果这没有意义，您可以在下面的代码中看到差异。

/* SCSS */$blue: #3bbfce;$margin: 16px;
.content-navigation {border-color: $blue;color: darken($blue, 9%);}
.border {padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

在上面的代码中，我们使用；来分隔声明。我甚至将. border的所有声明添加到一行中以进一步说明这一点。相反，下面的SASS代码必须在不同的行上使用缩进，并且没有使用；。

/* SASS */$blue: #3bbfce$margin: 16px
.content-navigationborder-color: $bluecolor: darken($blue, 9%)
.borderpadding: $margin / 2margin: $margin / 2border-color: $blue

您可以从下面的CSS中看到，SCSS样式比旧的SASS方法更类似于常规CSS。

/* CSS */.content-navigation {border-color: #3bbfce;color: #2b9eab;}
.border {padding: 8px;margin: 8px;border-color: #3bbfce;}

我想现在大多数时候，如果有人提到他们正在使用Sass，他们指的是用. scss而不是传统的. sass方式创作。

小开

紧凑的答案：

SCSS是指Sass CSS预处理器支持的主要语法

  • 以.scss结尾的文件代表Sass支持的标准语法。SCSS是CSS的超集。
  • 以.sass结尾的文件代表源自Ruby世界的Sass支持的“旧”语法。
小开

SASS代表语法上很棒的样式表。它是一个扩展的CSS，为基本语言增添了力量和优雅。SASS是新命名为SCSS，有一些chages，但旧的SASS也是在这里。在您使用SCSS或SASS之前，请查看以下差异。

在此处输入图片描述

一些SCSS和SASS语法的示例：

SCSS

$font-stack:    Helvetica, sans-serif;$primary-color: #333;
body {font: 100% $font-stack;color: $primary-color;}
//Mixins@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
bodyfont: 100% $font-stackcolor: $primary-color
//Mixins=transform($property)-webkit-transform: $property-ms-transform:     $propertytransform:         $property
.box+transform(rotate(30deg))

编译后输出CSS（两者相同）

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

有关更多指南，您可以查看官方网站。

小开

SASS是语法上令人敬畏的样式表，是CSS的扩展，提供嵌套规则、继承、混合的功能，而SCSS是与CSS相似的萨西级联样式表，填补了CSS和SASS之间的空白和不兼容。它在MIT许可下获得许可。本文有更多关于差异的内容：https://www.educba.com/sass-vs-scss/

小开

SCSS是Sass的新语法。在扩展方面，. sass用于SASS，而. scss用于SCSS。在这里，SCSS比SASS具有更逻辑和更复杂的编码方法。因此，对于软件领域的新手来说，更好的选择是SCSS。

小开

发现自己也在想同样的事情，并在哈佛的CS50中偶然发现了一个直截了当的解释：

一种名为Sass的语言……本质上是CSS的扩展……它为CSS添加了额外的功能……只是为了让我们使用它更强大一点。

Sass的关键特性之一是能够使用变量

Sass扩展名为.scss（与普通CSS文件的.css相反）。

所以，当我们问“scss和sass有什么区别？”-答案可能只是. scss只是希望使用Sass而不是常规CSS时使用的文件扩展名。

小开

太长别读

两者都是Sass，但不同的只是编译选项。

Sass（Sass）CSS=Sass

您可以使用SASS的语法不止一种，而是两种：一方面，您拥有原始形式，很乐意称为“缩进语法”或简称“SASS”。此外，还有一个较新的变体，它更接近CSS的规范，因此被称为时髦的CSS（SCSS）-即SASS风格的CSS。在SASS版本3中，SCSS已被确立为官方语法。最大的区别：使用括号和分号。

最初的SASS语法使用缩进和换行符，这是一种模仿YAML的方法。要终止一行代码，制作换行符就足够了——即按回车键。缩进通过制表器非常简单地工作。因此，通过改变字体中的位置，形成分组——所谓的声明块。这在CSS本身是不可能的。在这里，分组必须使用花括号，属性声明必须使用分号。这正是SCSS所需要的。

因此，它成为SASS与SCSS之间的争议

一些用户对原始SASS的易用性发誓，在那里移动源代码片段时，你不必注意括号的正确放置，并且通常会产生更精简、更简洁的代码。总的来说，“缩进语法”用更少的字符和行就可以了。另一方面，SCSS的支持者很高兴接受额外的努力，因为它无论如何都更类似于CSS中的知识。

SCSS是CSS的超集，这确保了CSS代码基本上也适用于SCSS——但不是相反。尽管如此，SASS的功能仍然完全包含在内。这使得同时使用两种语言更容易。此外，对于已经使用CSS并习惯语法的人来说，切换要容易得多。尽管SASS支持两种语法，但你必须根据项目进行选择：为了能够区分不同的格式，你给文件扩展名.sass或.scss。

小开

简单地说，SASS（语法上很棒的样式表）是一种预处理器脚本语言，将被编译或解释为CSS。SassScript本身是一种脚本语言，而SCSS是SASS的主要语法，它建立在现有CSS语法的基础上。


提交答案