SCSS和Sass有什么区别?


1900

根据我的阅读,Sass是一种语言,它通过变量和数学支持使CSS更加强大。

SCSS有什么区别?是否应该使用相同的语言?类似?不同?

Answers:


1862

Sass是具有语法改进功能的CSS预处理器。程序将处理高级语法的样式表,并将其转换为常规CSS样式表。但是,它们没有扩展CSS标准本身。

支持并可以使用CSS变量,但不能像预处理器变量那样使用CSS变量。

对于SCSS和Sass之间的区别,Sass文档页面上的此文本应回答以下问题:

Sass有两种语法。第一个被称为SCSS(Sassy CSS),在本参考文献中一直使用,它是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。下文描述的Sass功能增强了此语法。使用此语法的文件扩展名为.scss

第二种或更旧的语法(称为缩进语法(有时也称为“ Sass”))提供了一种更为简洁的CSS编写方式。它使用缩进而不是方括号来表示选择器的嵌套,并使用换行符而不是分号来分隔属性。使用此语法的文件扩展名为.sass

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


228
选择语法时,请记住,只有scss才允许从stackoverflow和浏览器的开发工具中复制和粘贴css,而在sass中,您始终必须调整语法
fishbone


另一个陷阱:截至2019年5月10日,SASS仍不支持多行表达式,因此大型列表/地图必须是单行的,必须使用大量函数调用进行定义,或者必须在SCSS文件中进行定义。它似乎仍然是计划中的功能,但是我不确定在实现方面是否真的有任何动静。
约瑟夫·西科斯基

12
@ 0x1ad2现在,在scss和之间进行选择sass不仅仅是个人喜好。scss是更加普遍-在最流行的CSS框架,如使用BootstrapFoundationMaterialize等主要的UI框架青睐scsssass角,反应,Vue公司-默认。任何教程或演示通常都将使用scss例如create-react-app facebook.github.io/create-react-app/docs/…–
Drenai

@fishbone并非完全正确,如果您使用体面的代码编辑器,它可以处理来自浏览器的复制样式并将其自身重写为缩进
Miro Krsjak,

617

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

区别在于UI。在文本外部之下,它们是相同的。这就是sass和scss文件可以相互导入的原因。实际上,Sass具有四个语法解析器:scss,sass,CSS和更少的语法解析器。所有这些将不同的语法转换为抽象语法树,然后通过sass-convert工具将其进一步处理为CSS输出或什至其他格式之一。

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


55
劳驾?我没看错吗?Sass可以正确导入更少的文件吗?mixin /变量之间有协同作用吗?
pilau

8
在有些人需要阅读您的代码的小组环境中,与标准CSS的相似性可能更为重要,但这种情况只是偶然的,而且他们没有时间/兴趣来学习一种全新的语法。
c roald,2014年

5
“ UI”是指“语言”吗?
djechlin '19

@djechlin-是的,我对“ UI”的解释将是文件的面向程序员的语法。例如分号与否,等等
Orion elenzil

10
是否应该像@orionelenzil所建议的那样将答案中的“ UI”替换为更容易理解的术语?
Michael Freidgeim

382

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

Example.sass-sass是较旧的语法

$color: red

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

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

Example.scss-sassy css是Sass 3以来的新语法

$color: red;

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

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

任何有效的CSS文件可以简单地通过从改变扩展转换为野蛮CSS(SCSS).css.scss


@Novocaine +1,我同意。作为C ++程序员,我更喜欢方括号和分号。顺便说一句,我有一个问题,不从转换.scss.css.css.scss
JW.ZG '16

1
这是更我关心的上面......懒得答案比较阅读;-)
LYU

9
@ JW.ZG,这不是转换,本机.css恰好是有效的.scss。一旦添加了scss特定的代码,将文件名改回来将最终成为无效的css文件。css是正方形,scss是矩形。所有正方形都是矩形,但并非所有矩形都是正方形。
格兰特(Grant)

145

Sass语法上很棒的StyleSheets)具有两种语法:

  • 较新的:SCSSSassy CSS
  • 还有一个较旧的原始的:indent语法,它是原始的Sass,也称为Sass

因此它们都是Sass预处理程序的一部分,具有两种可能的语法。

SCSS和原始Sass之间最重要的区别是:

SCSS

  • 语法类似于CSS(以至于每个常规有效的CSS3也是有效的SCSS,但是显然不会发生相反方向的关系)

  • 使用牙套 {}

  • 使用分号 ;
  • 分配标志为 :
  • 要创建一个mixin,它使用@mixin指令
  • 要使用mixin,它在@include指令之前
  • 文件扩展名为.scss

原始的Sass

  • 语法类似于Ruby
  • 没有大括号
  • 没有严格的缩进
  • 没有分号
  • 分配符号=代替:
  • 要创建一个mixin,它使用=符号
  • 要使用mixin,请在其前面加上+符号
  • 文件扩展名为.sass

一些人更喜欢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文档


14
奇怪的是,如此简洁明了的答案所获得的选票比其他人少。我一直在浏览大量资料,以了解Sass和Scss之间的区别,最后发现这一点立即启发了我。不错,除了一些拼写/语法错误。
tnkh

3
@TonyNg谢谢。很高兴可以为您服务。关于这些要点,可以肯定是因为我回答得很晚–在问了问题大约6年之后。如果我在拼写或语法上有错误,请随时纠正我。
simhumileco

3
添加一个简单的示例以显示不同的语法,此答案将是完美的。
霍根

3
干净的答案,令人印象深刻
Hidayt Rahman

3
很好的答案是这样!
Mohammad Afrashteh,

80

它的语法不同,这是主要的优点(或缺点,取决于您的观点)。

我将尽量不重复别人说的很多话,您可以轻松地用谷歌搜索,但是我想根据我在使用两者时的经验,甚至在同一个项目中,说几句话。

SASS专业版

  • 更清洁-如果您来自Python,Ruby(甚至可以使用类似符号的语法编写道具)或CoffeeScript世界,这对您来说将是很自然的-编写mixin,函数以及通常所有可重用的内容.sass都更加“容易”和可读性比.scss(主观)。

SASS缺点

  • 空格敏感(主观),我不介意其他语言,但是在CSS中,它让我感到困扰(问题:复制,制表符与空间大战等)。
  • 没有内联规则(这对我来说body color: red是个大难题),您无法像在.scss中那样body {color: red}
  • 导入其他供应商的东西,复制原始CSS片段-不是没有可能,但一段时间后很无聊。解决方案是在项目中包含.scss文件(以及.sass文件)或将其转换为.sass

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

现在,我想做的是.sass.scss可能的情况下在其中编写可直接编译为CSS的mixin和变量以及代码(例如,Visual Studio不支持,.sass但是每当我在Rails项目上工作时,我通常都将其中两个结合在一起)在一份文件中c)。

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

和final mixin用于.scssvs .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

4
@cimmanon它具有优点和缺点,并有明确说明。这就是此答案与其他答案之间的区别。我赞成退出红色。我认为这是有用的,即使它具有其他SO帖子具有的常见的维恩图重叠式答案。这对于仅在两条路径上做出选择的人可能会更有用。我还认为它比接受的答案好一点,因为它实际上显示了语言的差异,而不是仅仅说“ Sass有所不同,因为它不是SCSS”,这对我来说是没有用的。我可以不用个人用途的东西,但仍然:)
coblr 2015年

61

语言首页

Sass有两种语法。新的主要语法(从Sass 3开始)被称为“ SCSS”(对于“ Sassy CSS”),并且是CSS3语法的超集。这意味着每个有效的CSS3样式表也都是有效的SCSS。SCSS文件使用扩展名.scss。

第二种较旧的语法称为缩进语法(或简称为“ Sass”)。 受Haml简洁的启发,它是为那些喜欢简洁而不是CSS相似性的人们设计的。代替括号和分号,它使用行的缩进来指定块。尽管不再是主要语法,但缩进语法将继续受到支持。缩进语法的文件使用扩展名.sass。

SASS是一种吐出CSS 的解释型语言。Sass的结构看起来像CSS(远程),但是在我看来,描述有点误导;这是不是对CSS的替代品,或延期。它是一个解释器,最终吐出CSS,所以Sass仍然具有普通CSS的局限性,但是它用简单的代码掩盖了它们。


22

基本区别是语法。虽然SASS的语法宽松,带有空格,没有分号,但SCSS更类似于CSS。


21

SASS代表语法很棒的样式表。它是CSS的扩展,为基本语言增添了力量和优雅。SASS被重新命名为SCSS,但带有一些标记,但是旧的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)); }

萨斯

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

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

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $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);
}

有关更多指南,请访问官方网站


16

Sass是第一个,语法有点不同。例如,包括一个混合:

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

Sass忽略花括号和分号,而是放在嵌套上,我发现它更有用。


13

SASS和SCSS之间的差异解释了细节上的差异。不要被SASS和SCSS选项所迷惑,尽管我起初也是.scss是Sassy 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-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

您可以从下面的CSS中看到,与旧的SASS方法相比,SCSS样式与常规CSS更加相似。

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

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

我认为这些天的大多数时候,如果有人提到他们正在使用Sass进行工作,那么他们所指的是使用.scss而不是传统的.sass方式进行创作。


12

原始的sass是红宝石语法,类似于红宝石,玉石等。

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

scss语法上更像CSS,但有更多选择,例如:嵌套,声明等,类似于less和其他预处理CSS...

他们基本上做同样的事情,但我把夫妇各行的看语法差异,看{};spaces

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

6

紧凑的答案:

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

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

4

SASS是语法上很棒的样式表,是CSS的扩展,提供了嵌套规则,继承,混合功能,而SCSS是Sassy级联样式表,与CSS相似,填补了CSS和SASS之间的空白和不兼容之处。它是根据MIT许可获得许可的。本文详细介绍了不同之处:https//www.educba.com/sass-vs-scss/

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.