SCSS 和 Sass 有什么区别？

系统管理员 2024-03-30 01:40 90阅读 0赞

## 问： ##

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

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

## 答1: ##

> huntsbot.com – 程序员副业首选，一站式外包任务、远程工作、创意产品分享订阅平台。

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

CSS 变量受支持并且可以使用，但不如预处理器变量。

对于 SCSS 和 Sass 之间的区别，Sass documentation page 上的这段文字应该回答这个问题：

Sass 有两种可用的语法。第一个，称为 SCSS (Sassy CSS)，在本参考资料中使用，是 CSS 语法的扩展。这意味着每个有效的 CSS 样式表都是具有相同含义的有效 SCSS 文件。这个语法通过下面描述的 Sass 特性得到了增强。使用此语法的文件具有 .scss 扩展名。第二种和更旧的语法，称为缩进语法（或有时简称为“Sass”），提供了一种更简洁的 CSS 编写方式。它使用缩进而不是括号来表示选择器的嵌套，并使用换行符而不是分号来分隔属性。使用此语法的文件具有 .sass 扩展名。

但是，最终创建 CSS 的 all this works only with the Sass pre-compiler。它不是 CSS 标准本身的扩展。

`选择语法时，请记住只有 scss 允许从 stackoverflow 和浏览器的开发工具中复制和粘贴 css，而在 sass 中您总是需要调整语法`

`CSS3 有变量：developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables`

`另一个问题：截至 2019 年 5 月 10 日，SASS 仍然不支持多行表达式，因此大型列表/映射必须是单行的，使用大量函数调用定义，或者在 SCSS 文件中定义。它似乎仍然是一个计划中的功能，但我不确定实际上是否有任何实施进展。`

`@0x1ad2 如今，scss 和 sass 之间的选择不仅仅是个人喜好。 scss 更为普遍 - 用于最流行的 CSS 框架，如 Bootstrap、Foundation、Materialize 等。默认情况下，主要的 UI 框架偏爱 scss 而不是 sass - Angular、React、Vue。任何教程或演示通常都会使用 scss 例如 create-react-app facebook.github.io/create-react-app/docs/…`

`截至今天，它说“除了一些小例外，它是 CSS 的超集，这意味着基本上所有有效的 CSS 也是有效的 SCSS。” ...如果不提供有关“小例外”的更多详细信息的链接，您根本无法编写类似的内容:(`

## 答2: ##

> huntsbot.com全球7大洲远程工作机会，探索不一样的工作方式

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

区别在于语法。在文字外观之下，它们是相同的。这就是为什么 sass 和 scss 文件可以相互导入的原因。实际上，Sass 有四种语法解析器：scss、sass、CSS 和 less。所有这些都将不同的语法转换为 Abstract Syntax Tree，然后通过 sass-convert 工具将其进一步处理为 CSS 输出，甚至转换为其他格式之一。

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

`打扰一下？我没看错吗？ Sass 真的可以正确导入 Less 文件吗？ mixins/变量之间有什么协同作用吗？`

`与标准 CSS 的相似性在小组环境中可能更重要，在这些环境中，有些人需要阅读您的代码，但只是偶尔，而且他们没有时间/兴趣来学习全新的语法。`

`“UI”是指“语言”吗？`

`@djechlin - 是的，我在这里对“UI”的解释是文件的面向程序员的语法。例如分号与否等。`

`正如@orionelenzil 所建议的那样，是否应该将答案中的“UI”替换为更普遍理解的术语？`

## 答3: ##

> huntsbot.com – 高效赚钱，自由工作

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 更改为 .scss，任何有效的 CSS 文档都可以转换为 Sassy CSS (SCSS)。

`@Novocaine +1，我同意。作为一名 C++ 程序员，我更喜欢括号和分号。顺便说一句，我有一个问题，从 .scss 到 .css 的转换与从 .css 到 .scss 的转换相同吗？`

`与上面的答案相比，我更关心的是......懒得阅读;-)`

`@JW.ZG，这不是转换，本机 .css 恰好是有效的 .scss。一旦您添加了特定于 scss 的代码，将文件名改回最终将成为无效的 css 文件。 css 是正方形，scss 是矩形。所有正方形都是长方形，但并非所有长方形都是正方形。`

`@Grant 除了一些矩形需要修改才能转换为正方形。 CSS永远不需要修改来转换成SCSS，它就是这样。`

`赞成提供代码片段。其他答案提供了更多背景信息，但这个答案让我快速识别出我过去见过的语法，以及看起来很熟悉的语法。`

## 答4: ##

> 一个优秀的自由职业者，应该有对需求敏感和精准需求捕获的能力，而huntsbot.com提供了这个机会

Sass（Syntactically Awesome StyleSheets）有两种语法：

较新的：SCSS（Sassy CSS）

和一个更旧的、原始的：缩进语法，它是原始的 Sass，也称为 Sass。

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

SCSS 和原始 Sass 最重要的区别：

SCSS：

语法类似于 CSS（以至于每个常规有效 CSS3 也是有效 SCSS，但另一个方向的关系显然不会发生）

使用大括号 \{\}

使用分号；

分配标志是：

要创建一个 mixin，它使用 @mixin 指令

要使用 mixin，它前面有 @include 指令

文件具有 .scss 扩展名。

原始萨斯：

语法类似于 Ruby

没有大括号

没有严格的缩进

没有分号

赋值符号是 = 而不是：

要创建一个 mixin，它使用 = 符号

要使用 mixin，它前面有 + 号

文件具有 .sass 扩展名。

有些人更喜欢 Sass，这是原始语法 - 而其他人则更喜欢 SCSS。无论哪种方式，但值得注意的是 Sass’s indented syntax has not been and will never be deprecated。 （档案）

使用 sass-convert 进行转换：

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

The Sass and SCSS documentation

`奇怪的是，如此清晰简洁的答案比其他答案的得票少。我一直在通过大量资源来了解 Sass 和 Scss 之间的区别，最终发现这一点立即启发了我。干得好，除了一些拼写/语法错误。`

`@TonyNg 谢谢。我很高兴能帮助你。关于要点，这是非常肯定的，因为我回答得很晚——大约是在提问后 6 年。如果我犯了拼写或语法错误，请随时纠正我。`

`添加一个简单的示例来显示不同的语法，这个答案将是完美的。`

## 答5: ##

> huntsbot.com洞察每一个产品背后的需求与收益，从而捕获灵感

它的语法不同，这是主要的优点（或缺点，取决于您的观点）。

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

SASS 专业版

更干净——如果你来自 Python、Ruby（你甚至可以用类似符号的语法编写 props）甚至是 CoffeeScript 世界，这对你来说会很自然——在 .sass 中编写 mixins、函数和通常任何可重用的东西都是很多的比 .scss 中的“更容易”和可读性（主观）。

SASS 缺点

空格敏感（主观），我不介意在其他语言中，但在 CSS 中它只是困扰我（问题：复制，标签与空间战争等）。

没有内联规则（这对我来说是游戏破坏），你不能像在 .scss body \{color: red\} 中那样做 body color: red

导入其他供应商的东西，复制原始的 CSS 片段——不是不可能，但一段时间后会很无聊。解决方案是在您的项目中包含 .scss 文件（连同 .sass 文件）或将它们转换为 .sass。

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

现在，我喜欢在 .sass 中编写 mixins 和变量，如果可能的话，将在 .scss 中实际编译为 CSS 的代码（即 Visual Studio 不支持 .sass，但每当我在 Rails 上工作时我通常将其中两个项目组合在一起，而不是在一个文件中 c)。

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

最后是用于 .scss 与 .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

`@cimmonon 它具有优点和缺点，清楚地说明了。这就是这个答案和其他答案的区别。我赞成退出红色。我认为它很有用，即使它具有其他所有 SO 帖子都有的常见的答案重叠维恩图。这对于仅在两条路径上做出选择的人可能更有用。我也认为它比公认的答案好一点，因为它实际上显示了语言的差异，而不是仅仅说“Sass 不同，因为它不是 SCSS”，这对我来说是无用的。我可以不用个人使用的东西，但仍然:)`

`7年后读这本书； yuph，我从来没有给 stylus 机会 :)`

## 答6: ##

> huntsbot.com – 高效赚钱，自由工作

从homepage of the language

Sass 有两种语法。新的主要语法（从 Sass 3 开始）被称为“SCSS”（代表“Sassy CSS”），是 CSS3 语法的超集。这意味着每个有效的 CSS3 样式表也是有效的 SCSS。 SCSS 文件使用扩展名 .scss。第二种较旧的语法称为缩进语法（或简称为“Sass”）。受 Haml 简洁的启发，它适用于喜欢简洁而不是与 CSS 相似的人。它不使用括号和分号，而是使用行的缩进来指定块。尽管不再是主要语法，但仍将继续支持缩进语法。缩进语法中的文件使用扩展名 .sass。

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

> 一个优秀的自由职业者，应该有对需求敏感和精准需求捕获的能力，而huntsbot.com提供了这个机会

## 答7: ##

> 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

SASS 代表语法上很棒的样式表。它是 CSS 的扩展，为基本语言增添了力量和优雅。 SASS 新命名为 SCSS，但有一些改动，但旧的 SASS 也存在。在使用 SCSS 或 SASS 之前，请查看以下区别。

https://i.stack.imgur.com/fJUJV.jpg

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

SASS

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

如需更多指南，您可以查看官方website。

`Ruby Sass 是 Sass 的最初实现，但它于 2019 年 3 月 26 日结束了生命周期。Dart Sass 现在是 Sass 的主要实现。`

## 答8: ##

> huntsbot.com聚合了超过10+全球外包任务平台的外包需求，寻找外包任务与机会变的简单与高效。

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

## 答9: ##

> 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

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

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

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

## 答10: ##

> HuntsBot周刊–不定时分享成功产品案例，学习他们如何成功建立自己的副业–huntsbot.com

Difference between SASS and 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 方式进行创作。

## 答11: ##

> huntsbot.com聚合了超过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;
    }

`Ruby Sass 是 Sass 的最初实现，但它于 2019 年 3 月 26 日结束了生命周期。Dart Sass 现在是 Sass 的主要实现。`

原文链接：[https://www.huntsbot.com/qa/lar3/whats-the-difference-between-scss-and-sass?lang=zh\_CN&from=csdn][https_www.huntsbot.com_qa_lar3_whats-the-difference-between-scss-and-sass_lang_zh_CN_from_csdn]

> huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

[https_www.huntsbot.com_qa_lar3_whats-the-difference-between-scss-and-sass_lang_zh_CN_from_csdn]: https://www.huntsbot.com/qa/lar3/whats-the-difference-between-scss-and-sass?lang=zh_CN&from=csdn