SCSS和Sass有什么区别？

Question

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

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

Answer 1

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

CSS变量受支持且可以使用,但不如预处理器变量.

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

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

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

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

Answer 2

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

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

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

Answer 3

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.

Answer 4

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

• 更新的:SCSS(Sassy CSS)
• 和较旧的原始:缩进语法,它是原始的Sass,也称为Sass.

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

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

SCSS:

• 语法类似于CSS
• 使用大括号 {}
• 使用分号 ;
• 变量符号是 :
• 作业标志是 @mixin
• 文件具有.scss扩展名.

原萨斯:

• 语法类似于Ruby
• 没有牙套
• 没有严格的缩进
• 没有分号
• 变量符号@include代替=
• 分配标志:代替=
• 文件具有.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

Answer 5

它的语法不同,这是主要的专业(或者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项目时我通常将它们中的两个组合在一起,而不是在一个文件ofc).

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

最后用于.scssvs .sass语法比较的mixin :

// 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

Answer 6

从语言的主页

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

第二种较旧的语法称为缩进语法(或仅称为"Sass"). 受Haml的简洁启发,它适用于那些喜欢与CSS相似的简洁性的人.它使用行的缩进来指定块,而不是括号和分号.虽然不再是主要语法,但将继续支持缩进语法.缩进语法中的文件使用扩展名.sass.

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

Answer 7

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

Answer 8

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

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

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

Answer 9

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

更多参考官方网站

Answer 10

原始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;
}

Answer 11

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

Answer 12

长话短说

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

S(assy) CSS = Sass

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

原始的 SASS 语法使用缩进和换行，这是一种模仿YAML. 要终止一行代码，只需换行即可 - 即按 Enter 键。通过制表器可以非常简单地进行缩进。因此，通过改变字体中的位置，形成分组——所谓的声明块。这对于 CSS 本身来说是不可能的。这里，花括号必须用于分组，分号必须用于属性声明。这正是 SCSS 所需要的。

于是这就变成了 SASS 与 SCSS 之间的争论

一些用户对原始 SASS 的易用性深信不疑，在移动源代码片段时无需注意括号的正确放置，并且通常会生成更精简、更简洁的代码。总的来说，“缩进语法”可以使用更少的字符和行。另一方面，SCSS 的支持者很乐意接受额外的努力，因为无论如何它与 CSS 中已知的内容更相似。

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

Answer 13

SASS 是 Syntactically Awesome Style Sheets，是 CSS 的扩展，提供嵌套规则、继承、Mixin 等功能，而 SCSS 是 Sassy Cascaded Style Sheets，与 CSS 类似，填补了 CSS 和 SASS 之间的空白和不兼容。它是在 MIT 许可下获得许可的。本文有更多关于差异的信息：https : //www.educba.com/sass-vs-scss/

Answer 14

紧凑的答案：

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

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