题 SCSS和Sass有什么区别?


从我一直在阅读的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言。

与SCSS有什么区别?它应该是同一种语言吗?类似?不同?


1336
2018-04-13 19:23


起源




答案:


Sass是一个具有语法改进的CSS预处理器。高级语法中的样式表由程序处理,并转换为常规CSS样式表。但是,他们这样做  扩展CSS标准本身。

其主要原因是增加了CSS痛苦缺乏的功能(如变量)。

SCSS和Sass之间的区别,本文就有了 Sass文档页面 应该回答这个问题:

Sass有两种语法可供使用。第一个,称为SCSS(Sassy CSS),在整个引用中使用,是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。使用下面描述的Sass功能增强了此语法。使用此语法的文件具有 .scss 延期。

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

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


1364
2018-04-13 19:25



以上文字现已从Sass主页上删除。非常感谢你引用文字的答案! - Roy Ling
该文本现在移到这里: sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax - Roy Ling
大声朗读这个答案后,我知道我有一个口齿不清。 - robnardo
在选择语法时,请记住只有scss允许从stackoverflow和浏览器的开发工具中复制和粘贴css,而在sass中你总是需要调整语法 - fishbone
CSS3有变量: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables - Jersh


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

不同之处在于UI。在文字外部下方,它们是相同的。这就是为什么sass和scss文件可以互相导入的原因。实际上,Sass有四种语法分析器:scss,sass,CSS等等。所有这些都将不同的语法转换为 抽象语法树 通过sass-convert工具进一步处理成CSS输出或甚至其他格式之一。

使用您最喜欢的语法,两者都得到完全支持,如果您改变主意,可以稍后更改它们。


482
2018-04-20 15:16



打扰一下?我读过了吗? Sass实际上可以正确导入Less文件吗? mixins /变量之间是否有任何协同作用? - pilau
在有人需要阅读您的代码的群组环境中,与标准CSS的相似性可能更为重要,但只是偶尔,并且他们没有时间/兴趣来学习全新的语法。 - c roald


萨斯 .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文档转换为Sassy CSS(SCSS) .css 至 .scss


266
2017-11-30 03:05



@Novocaine +1,我同意。作为C ++程序员,我更喜欢括号和分号。顺便说一句,我有一个问题,转换是从 .scss 至 .css 同样的 .css 至 .scss? - JW.ZG
我们可以在这看到不同之处 sass-lang.com/guide - Anthuan Vásquez


它的语法不同,这是主要的专业(或者con,取决于你的观点)。

我会尽量不重复其他人所说的内容,你可以轻松地谷歌,但相反,我想从我使用两者的经验中说几件事,有时甚至在同一个项目中。

SASS亲 

  • 更清洁 - 如果你来自Python,Ruby(你甚至可以用类似符号的语法编写道具)甚至是CoffeeScript世界,它对你来说非常自然 - 编写mixins,函数和一般任何可重用的东西 .sass比起来更“容易”和可读 .scss (主观)。

SASS缺点

  • 空白敏感(主观),我不介意在其他语言中,但在CSS中它只是困扰我(问题:复制,制表与太空战争等)。
  • 没有内联规则(这对我来说是游戏破坏),你做不到 body color: red 就像你可以在.scss中一样 body {color: red}
  • 导入其他供应商的东西,复制vanilla CSS片段 - 一段时间后不是不可能但很无聊。解决方案是要么拥有 .scss 文件(与...一起) .sass 您的项目中的文件)或将它们转换为 .sass

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

现在,我喜欢做的是编写mixins和变量 .sass 以及将实际编译为CSS的代码 .scss 如果可能的话(即Visual Studio没有支持 .sass 但每当我在Rails项目上工作时,我通常会将它们中的两个组合在一起,而不是在一个文件中。

最近,我正在考虑给予 唱针 一个机会(对于全时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

57
2018-05-13 14:16



@cimmanon它的优点和缺点,清楚地阐明。这就是这个和其他答案之间的区别。我倾向于退出红色。我认为它很有用,即使它有通常的回答重叠的维恩图,其他每个SO帖子都有。对于只在两条路径上做出选择的人来说,这可能更有用。我也认为它比接受的答案好一点,因为它实际上显示了语言的差异,而不仅仅是说“Sass是不同的,因为它不是SCSS”,这对我来说是无用的。我可以没有个人使用的东西,但仍然:) - coblr


来自 语言的主页

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

第二个较旧的语法称为   缩进语法(或只是“Sass”)。   受到Haml的简洁启发,它就是   适合喜欢的人   与CSS相似的简洁性。   它代替括号和分号   使用行的缩进   指定块。虽然不再了   主要语法,缩进语法   将继续得到支持。档   在缩进语法中使用   扩展名.sass。

SASS是一个 解读 吐出CSS的语言。萨斯的结构 容貌 像CSS(远程),但在我看来,描述有点误导;它的  CSS的替代品或扩展名。它是一个最终吐出CSS的解释器,因此Sass仍然具有普通CSS的局限性,但它用简单的代码掩盖它们。


45
2018-04-13 19:27



错过了,非常感谢你 - bruno077


萨斯 (语法上令人敬畏的StyleSheets)有两种语法:

  • 更新的: SCSS (Sassy CSS
  • 和较旧的,原始的:缩进语法,这是原始的 萨斯 并且也被称为 萨斯

所以他们都是 萨斯 预处理器有两种不同的可能语法。

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

SCSS

  • 它的语法类似于 CSS
  • 使用大括号 {}
  • 使用分号 ;
  • 变量登录 SCSS 是 $
  • 分配登录 SCSS 是 :
  • 使用此语法的文件具有 .scss 延期。

原版的 萨斯

  • 它的语法类似于 红宝石
  • 这里没有括号的用法。
  • 没有严格的缩进。
  • 没有分号。
  • 变量登录 萨斯 是 ! 代替 $
  • 作业登录 萨斯 是 = 代替 :
  • 使用此语法的文件具有 .sass 延期。

这些是可用的两种语法 萨斯

有些人更喜欢 萨斯,原始语法 - 而其他人更喜欢 SCSS。无论哪种方式,但值得注意的是 萨斯的 缩进语法尚未被永远不会被弃用

转换与 上海社会科学院,转换

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

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

SASS REFERENCE


37
2018-04-10 11:16



奇怪的是,这种清晰简洁的答案比其他答案的票数少。我一直在经历大量的消息来源,以了解Sass和Scss之间的区别,并最终发现这一点立即启发我。干得好,除了一些拼写/语法错误。 - tnkh
@TonyNg谢谢。我很高兴能帮到你。关于这些要点,它是如此肯定,因为我回答很晚 - 提问后约6年。随意纠正我,我拼写错误或语法错误。 - prostosmirienie
感谢您参考转换器 - Greg


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


18
2018-05-06 10:36





原版的 sass 是ruby语法,类似于ruby,jade等...

在那些语法中,我们不使用 {}相反,我们使用白色空间,也没有使用 ;...

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

他们基本上做同样的事情,但我把每一行的几行看到语法差异,看看 {};,和 spaces

上海社会科学院:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

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

9
2017-07-02 04:51





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

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

Sass忽略了大括号和半冒号并且在嵌套上,我发现它更有用。


8
2018-04-11 13:25





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中看到,SCSS样式与常规CSS相比,与旧的SASS方法非常相似。

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

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

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


4
2018-05-02 05:40





SASS代表Syntactically Awesome StyleSheets。这是一个扩展   CSS为基本语言增添了力量和优雅。 SASS是   新命名为SCSS有一些chages,但旧的SASS也是   那里。在使用SCSS或SASS之前,请参阅以下差异。

enter image description here

一些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);
}

更多参考官方 网站


2
2017-07-19 13:20