CSS 和 SCSS 有什么区别？

Question

我非常了解 CSS，但对 Sass 感到困惑。 SCSS 与 CSS 有何不同，如果我使用 SCSS 而不是 CSS，它的工作方式是否相同？

原文由 Urvi_204 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

除了 伊德里斯 的回答：

CSS

在 CSS 中，我们编写如下所示的完整代码。

 body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

在 SCSS 中，我们可以使用 @mixin 缩短此代码，因此我们不必一次又一次地编写 color 和 width 属性。我们可以通过一个函数来定义它，类似于 PHP 或其他语言。

 $color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SASS

然而，在 SASS 中，整个结构在视觉上比 SCSS 更快、更清晰。

• 当您使用复制和粘贴时，它对空格很敏感，
• 似乎它目前不支持内联 CSS。

   $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif

  body
    width: $width
    color: $color
    font: 100% $stack

    content
      width: $width
      background:$color

原文由 Hash 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

CSS 是任何浏览器都可以理解的用于设置网页样式的样式语言。

SCSS 是一种特殊类型的文件 SASS 一个用 Ruby 编写的程序，它汇编了 CSS 浏览器的样式表，以及用于信息的 SASS CSS 的附加功能，如变量、嵌套等，可以使编写 CSS 更容易和更快。

SCSS 文件 由运行 Web 应用程序的服务器处理，以输出您的浏览器可以理解的传统 CSS 。

原文由 Idriss Benbassou 发布，翻译遵循 CC BY-SA 4.0 许可协议