css - SCSS和Sass有什么区别？

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

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

bruno077 asked 2018-12-26T08:42:47Z

12个解决方案

1419 votes

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

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

SCSS和Sass之间的区别，Sass文档页面上的这个文本应该回答这个问题：

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

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

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

MauroPorrasP answered 2018-12-26T08:43:16Z

495 votes

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

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

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

chriseppstein answered 2018-12-26T08:43:46Z

287 votes

Sass .css文件在视觉上与.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更改为.scss，即可将任何有效的CSS文档转换为Sassy CSS(SCSS)。

Anthuan Vásquez answered 2018-12-26T08:44:19Z

60 votes

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

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

SASS亲

更清洁 - 如果你来自Python，Ruby(你甚至可以用类似符号的语法编写道具)甚至是CoffeeScript世界，它对你来说都很自然 - 编写mixins，函数以及.sass中的任何可重用的东西都很多' 比.scss(主观)更容易和可读。

SASS缺点

空白敏感(主观)，我不介意在其他语言中，但在CSS中它只是困扰我(问题：复制，制表与太空战争等)。

没有内联规则(这对我来说是游戏破坏)，你不能像.scss那样做.scss .sass

导入其他供应商的东西，复制vanilla CSS片段 - 一段时间后不是不可能但很无聊。 解决方案是在项目中包含.scss文件(以及.sass文件)或将它们转换为.sass。

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

现在，我想做的是在.scss中编写mixins和变量，如果可能的话，将在.sass中实际编译为CSS的代码(即Visual Studio不支持.sass，但每当我处理Rails项目时，我通常会将两个 他们，而不是在一个文件中)。

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

最后mixin for .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

Drops answered 2018-12-26T08:45:30Z

47 votes

从语言的主页

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

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

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

Blender answered 2018-12-26T08:46:05Z

42 votes

Sass(Syntactically Awesome StyleSheets)有两种语法：

更新：SCSS(Sass CSS)

和一个较旧的，原始的：缩进语法，这是原始的萨斯，也被称为萨斯。

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

SCSS与原始Sass之间最重要的区别：

SCSS：

它的语法类似于CSS。

使用大括号=。

使用分号=。

SCSS中的变量符号是=。

SCSS的转让登录是=。

使用此语法的文件具有.scss扩展名。

原始萨斯：

它的语法类似于Ruby。

这里没有括号的用法。

没有严格的缩进。

没有分号。

Sass中的变量符号是=而不是:。

Sass的作业是=而不是:。

使用此语法的文件具有.sass扩展名。

这些是Sass可用的两种语法。

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

转换为sass-convert：

# Convert Sass to SCSS

$ sass-convert style.sass style.scss

# Convert SCSS to Sass

$ sass-convert style.scss style.sass

SASS REFERENCE

simhumileco answered 2018-12-26T08:48:06Z

19 votes

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

designerNProgrammer answered 2018-12-26T08:48:26Z

9 votes

原文{}是ruby语法，类似于ruby，jade等...

在那些语法中，我们不使用{}，而是使用白色空格，也没有使用; ......

在{}语法更像是;，但有更多的选项，如：嵌套，声明等，类似于spaces和其他预处理CSS ......

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

上海社会科学院：

$width: 100px

$color: green

div

width: $width

background-color: $color

SCSS：

$width: 100px;

$color: green;

div {

width: $width;

background-color: $color;

}

Alireza answered 2018-12-26T08:49:08Z

8 votes

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

Sass: +mixinname()

Scss: @include mixinname()

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

user3522940 answered 2018-12-26T08:49:34Z

6 votes

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方式。

Shailesh Vikram Singh answered 2018-12-26T08:50:13Z

5 votes

SASS代表Syntactically Awesome StyleSheets。 这是一个扩展   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)); }

上海社会科学院

$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);

}

更多参考官方网站

Srikrushna Pal answered 2018-12-26T08:50:56Z

2 votes

紧凑的答案：

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

以.sass结尾的文件表示Sass支持的标准语法。 SCSS是CSS的超集。

以.sass结尾的文件表示源自ruby世界的Sass支持的“较旧”语法。

matthias answered 2018-12-26T08:51:30Z