关于css：SCSS和Sass有什么区别？


What's the difference between SCSS and Sass?

从我读到的内容来看，sass是一种语言，它使css更强大，支持变量和数学。

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

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

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

SCSS和SASS之间的区别，SASS文档页面上的此文本应回答以下问题：

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just"Sass"), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

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

相关讨论

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

区别在于用户界面。在文本的外部，它们是相同的。这就是为什么sass和scss文件可以互相导入的原因。实际上，sass有四个语法分析器：scss、sass、css和less。所有这些都将不同的语法转换为抽象语法树，然后通过sass转换工具进一步处理为css输出，甚至转换为其他格式之一。

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

相关讨论

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

example.sass-sass是较旧的语法

1
2
3
4
5
6
7
8
$color: red

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

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

example.scss-sassy css是sass 3之后的新语法

1
2
3
4
5
6
7
8
9
10
$color: red;

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

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

只要将扩展名从.css更改为.scss即可将任何有效的css文档转换为sassy css(scss)。

相关讨论

它的语法是不同的，这是主要的pro(或con，取决于您的观点)。

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

萨斯斯普罗

  • 更干净——如果你来自于python、ruby(你甚至可以用类似符号的语法来编写props)甚至是coffeescript世界，那么对你来说，编写mixin、函数和一般来说，.sass中任何可重用的东西都比.scss中的东西(主观的)更"容易"和可读。

萨斯斯康斯

  • 空白敏感(主观)，我不介意它在其他语言，但在这里的CSS它只是困扰我(问题：复制，标签和空间战争等)。
  • 没有内线规则(这对我来说是个游戏破坏)，你不能像在.scss EDOCX1[3]中那样做EDOCX1[2]
  • 进口其他供应商的东西，复制普通的CSS片段-不可能，但一段时间后非常无聊。解决方案是在项目中使用.scss文件(与.sass文件一起使用)，或者将其转换为.sass文件。

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

现在，我喜欢做的是在.sass中编写混合函数和变量，如果可能的话，还可以在.scss中编写实际编译为css的代码(即Visual Studio不支持.sass，但每当我处理Rails项目时，我通常会将它们中的两个组合在一起，而不是在一个ofc文件中)。

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

最后将.scss与.sass语法比较：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 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
相关讨论

SASS(语法上很棒的样式表)有两种语法：

  • 更新的：scss(sassy css)
  • 还有一个旧的原始：缩进语法，它是原始的sass，也被称为sass。

所以它们都是SASS预处理器的一部分，有两种不同的语法。

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

SCSS：

  • 语法类似于css(每个常规的有效css3也都是有效的scs，但是在另一个方向上的关系显然不会发生)

  • 使用大括号{}。

  • 使用分号;。
  • 转让标志为:。
  • 为了创建混音，它使用@mixin指令
  • 在它前面使用mixin和@include指令
  • 文件的扩展名为.scss。

原始SASS：

  • 语法类似于Ruby
  • 无支架
  • 没有严格的缩进
  • 无半结肠
  • 转让标志为=，而不是:。
  • 为了创建一个mixin，它使用=符号
  • 在它前面使用mixin和+符号
  • 文件的扩展名为.sass。

有些人喜欢sass，即原始语法——而另一些人喜欢scss。不管怎样，但值得注意的是，sass的缩进语法并没有被弃用，也不会被弃用。

转换为sass转换：

1
2
3
4
5
# Convert Sass to SCSS
$ sass-convert style.sass style.scss

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

SASS参考文献

相关讨论

从语言的主页

Sass has two syntaxes. The new main
syntax (as of Sass 3) is known as
"SCSS" (for"Sassy CSS"), and is a
superset of CSS3’s syntax. This means
that every valid CSS3 stylesheet is
valid SCSS as well. SCSS files use the
extension .scss.

The second, older syntax is known as
the indented syntax (or just"Sass").
Inspired by Haml’s terseness, it’s
intended for people who prefer
conciseness over similarity to CSS.
Instead of brackets and semicolons, it
uses the indentation of lines to
specify blocks. Although no longer the
primary syntax, the indented syntax
will continue to be supported. Files
in the indented syntax use the
extension .sass.

sass是一种解释性语言，可以输出css。s a s s的结构看起来像css(远程)，但在我看来，这种描述有点误导人；它不是css的替代品，也不是扩展。它是一个最终输出CSS的解释器，所以SASS仍然有普通CSS的局限性，但是它用简单的代码来屏蔽它们。

基本的区别在于语法。虽然sass有一个松散的语法，没有空格和分号，但scss更像css。

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

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

Sass忽略了花括号和分号，把它们放在了嵌套上，我发现这更有用。

原始的sass是类似于ruby、jade等的Ruby语法。

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

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

它们基本上都是一样的，但是我把每行中的几行放在一起看语法差异，看{}、;和spaces：

萨斯：

1
2
3
4
5
6
$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS：

1
2
3
4
5
6
7
$width: 100px;
$color: green;

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

SASS和SCSS的区别文章详细解释了这一区别。不要被sass和scss选项混淆，尽管我最初也是，.scss是sassy css，是.sass的下一代。

如果这不合理，您可以看到下面代码的区别。

1
2
3
4
5
6
7
8
9
10
11
12
/* 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代码必须在不同的行上进行缩进，并且不使用；。

1
2
3
4
5
6
7
8
9
10
11
12
/* 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方法更相似。

1
2
3
4
5
6
7
8
9
10
11
/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

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

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

SASS stands for Syntactically Awesome StyleSheets. It is an extension
of CSS that adds power and elegance to the basic language. SASS is
newly named as SCSS with some chages, but the old one SASS is also
there. Before you use SCSS or SASS please see the below difference.

enter image description here

一些scss和sass语法的示例

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$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)); }

萨斯

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$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(两者相同)

1
2
3
4
5
6
7
8
9
10
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

更多信息请参考官方网站

紧凑的回答：

scss是指sass css预处理器支持的主要语法。

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