CSS 和 SCSS 有什么区别？

Question

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

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
  

Answer 2

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

SCSS 是SASS 的一种特殊类型的文件，这是一个用Ruby 编写的程序，它为浏览器组装CSS 样式表，对于信息，SASS 添加了许多附加功能到CSS 之类的变量、嵌套等可以使编写CSS 更容易和更快。
SCSS 文件由运行网络应用程序的服务器处理以输出传统的CSS你的浏览器可以理解。

Answer 3

css 也有变量。你可以像这样使用它们：

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

Answer 4

变量定义正确：

$      => SCSS, SASS
--     => CSS
@      => LESS

所有答案都很好，但问题与答案略有不同

“关于 Sass。SCSS 与 CSS 有何不同”：scss 是格式良好的 CSS3 语法。使用 sass 预处理器来创建它。

如果我使用 SCSS 而不是 CSS，效果会一样吗？ 是的。如果您的 ide 支持 sass 预处理器。比它的工作原理相同。

Sass 有两种语法。最常用的语法称为“SCSS”（代表“Sassy CSS”），是 CSS3 语法的超集。这意味着每个有效的 CSS3 样式表也是有效的 SCSS。 SCSS 文件使用扩展名 .scss。

第二种较旧的语法称为缩进语法（或简称为“.sass”）。受 Haml 简洁性的启发，它适用于喜欢简洁而不是与 CSS 相似的人。它不使用括号和分号，而是使用行的缩进来指定块。缩进语法中的文件使用扩展名 .sass。

---

• 更多信息：

---

什么是 CSS 预处理器？

CSS 本身没有编写可重用和有组织的代码所需的复杂逻辑和功能。结果，开发人员受到限制，并且在代码维护和可扩展性方面面临极大的困难，尤其是在处理涉及大量代码和多个 CSS 样式表的大型项目时。这就是 CSS 预处理器的用武之地。

CSS 预处理器是一种工具，用于通过其自己的脚本语言扩展默认 vanilla CSS 的基本功能。它可以帮助我们使用复杂的逻辑语法，比如变量、函数、mixin、代码嵌套和继承等等，增强你的 vanilla CSS。通过使用 CSS 预处理器，您可以无缝地自动化琐碎的任务，构建可重用的代码 sn-ps，避免代码重复和臃肿，并编写组织良好且易于阅读的嵌套代码块。 然而，浏览器只能理解原生的原生 CSS 代码，而无法解释 CSS 预处理器的语法。因此，复杂和高级的预处理器语法需要先编译成原生 CSS 语法，然后才能被浏览器解释，以避免跨浏览器兼容性问题。虽然不同的预处理器有自己独特的语法，但最终它们都会编译成相同的原生 CSS 代码。

在本文中，我们将看看目前全球开发人员使用的 3 种最流行的 CSS 预处理器，即 Sass、LESS 和 Stylus。 在您决定 Sass 与 LESS 与 Stylus 之间的胜者之前，让我们先详细了解它们。

Sass - 语法上很棒的样式表

Sass 是“Syntactically Awesome Style Sheets”的首字母缩写。 Sass 不仅是世界上最流行的 CSS 预处理器，也是最古老的 CSS 预处理器之一，由 Hampton Catlin 于 2006 年推出，后来由 Natalie Weizenbaum 开发。 尽管 Sass 是用 Ruby 语言编写的，但预编译器 LibSass 允许用其他语言解析 Sass 并将其与 Ruby 分离。 Sass 有一个庞大的活跃社区和广泛的网络学习资源可供初学者使用。由于其成熟、稳定和强大的逻辑能力，Sass 已经确立了自己领先于竞争对手的 CSS 预处理器的前沿。

Sass 可以使用 Sass 或 SCSS 以 2 种语法编写。两者有什么区别？让我们找出答案。

语法声明：Sass 与 SCSS

• SCSS 代表 Sassy CSS。与 Sass 不同，SCSS 不是基于 缩进。
• .sass 扩展名用作 Sass 的原始语法，而 SCSS 提供带有 .scss 扩展名的更新语法。
• 与 Sass 不同，SCSS 有花括号和分号，就像 CSS 一样。
• 与 SCSS 不同，Sass 很难阅读，因为它非常离经叛道 来自 CSS。这就是为什么 SCSS 是更推荐的 Sass 语法的原因 更容易阅读并且与原生 CSS 非常相似，同时 尽情享受 Sass 的力量。

考虑下面的示例，其中包含 Sass 与 SCSS 语法以及编译后的 CSS 代码。

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

在这两种情况下，无论是 Sass 还是 SCSS，编译出来的 CSS 代码都是一样的——

#box {
      color: #fff;
      background: #00f;

Sass 的使用

可以说最受欢迎的前端框架 Bootstrap 是用 Sass 编写的。直到版本 3，Bootstrap 都是用 LESS 编写的，但 bootstrap 4 采用了 Sass 并提高了它的流行度。一些使用 Sass 的大公司是——Zapier、Uber、Airbnb 和 Kickstarter。

LESS - 精简样式表

LESS 是“Leaner Stylesheets”的首字母缩写。它由 Alexis Sellier 于 2009 年发布，距 Sass 于 2006 年首次发布三年后。虽然 Sass 是用 Ruby 编写的，但 LESS 是用 JavaScript 编写的。事实上，LESS 是一个 JavaScript 库，它通过 mixin、变量、嵌套和规则集循环扩展了原生 vanilla CSS 的功能。 Sass vs LESS 一直是一场激烈的辩论。毫不奇怪，LESS 是 Sass 最强大的竞争对手，拥有第二大用户群。然而，随着 Bootstrap 4 的推出，当 bootstrap 抛弃 LESS 转而支持 Sass 时，LESS 的受欢迎程度下降了。 LESS 优于 Sass 的少数缺点之一是它不支持函数。与 Sass 不同，LESS 使用 @ 来声明变量，这可能会导致与 @media 和 @keyframes 混淆。然而，与 Sass 和 Stylus 或任何其他预处理器相比，LESS 的一个关键优势是可以轻松地将其添加到您的项目中。你可以通过使用 NPM 或合并 Less.js 文件来做到这一点。 语法声明：LESS 使用 .less 扩展名。 LESS 的语法与 SCSS 非常相似，只是在声明变量时，LESS 使用@而不是 $ 符号。

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

LESS 的使用 在第 4 版发布之前流行的 Bootstrap 框架是用 LESS 编写的。然而，另一个名为 SEMANTIC UI 的流行框架仍然是用 LESS 编写的。使用 Sass 的大公司包括 – Indiegogo、Patreon 和微信

手写笔

手写笔由前 Node JS 开发人员 TJ Holowaychuk 于 2010 年推出，距 Sass 发布近 4 年，距 LESS 发布 1 年。手写笔是用 Node JS 编写的，非常适合 JS 堆栈。手写笔深受 Sass 的逻辑能力和 LESS 的简单性的影响。尽管 Stylus 仍然受到 Node JS 开发人员的欢迎，但它并没有为自己赢得相当大的份额。与 Sass 或 LESS 相比，Stylus 的一个优势在于它配备了极其强大的内置功能，并且能够处理繁重的计算。

语法声明：Stylus 使用 .styl 扩展名。 Stylus 在编写语法方面提供了极大的灵活性，支持原生 CSS 并允许省略括号冒号和分号。另外，请注意 Stylus 不使用 @ 或 $ 符号来定义变量。相反，Stylus 使用赋值运算符来指示变量声明。

像原生 CSS 一样编写的 STYLUS 语法

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

或

没有大括号的手写笔语法

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

或

没有冒号和分号的手写笔语法

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color

Answer 5

而且这个少了

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

Answer 6

Sass 是一种语言，与编辑原始 .css 相比，它提供的功能可以更轻松地处理复杂的样式。此类功能的一个示例是允许定义可在不同样式中重复使用的变量。

该语言有两种替代语法：

• 类似于 JSON 的语法，保存在以 .scss 结尾的文件中
• 类似于 YAML 的语法，保存在以 .sass 结尾的文件中

其中任何一个都必须编译为浏览器可识别的.css文件。

更多信息请参见https://sass-lang.com/。