CSS 和 SCSS 有什么区别？

What is the difference between CSS and SCSS?

提问by Urvi_204

I know CSS very well, but am confused about Sass. How is SCSS different from CSS, and if I use SCSS instead of CSS will it work the same?

我非常了解 CSS，但对 Sass 感到困惑。SCSS 与 CSS 有何不同，如果我使用 SCSS 而不是 CSS，效果会一样吗？

回答by Hash

In addition to Idrissanswer:

除了伊德里斯的回答：

CSS

CSS

In CSS we write code as depicted bellow, in full length.

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

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

SCSS

社会保障局

In SCSS we can shorten this code using a @mixinso we don't have to write colorand widthproperties again and again. We can define this through a function, similarly to PHP or other languages.

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

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

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

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

SASS

SASS

In SASS however, the whole structure is visually quicker and cleaner than SCSS.

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

• It is sensitive to white space when you are using copy and paste,

• It seems that it doesn't support inline CSS currently.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color
  

• 当您使用复制和粘贴时，它对空白很敏感，

• 目前似乎不支持内联 CSS。

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color
  

回答by Idriss Benbassou

CSS is the styling language that any browser understands to style webpages.

CSS 是任何浏览器都能理解的样式语言，用于设计网页样式。

SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser, and for information SASS adds lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster. SCSS files are processed by the server running a web app to output a traditional CSS that your browser can understand.

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

回答by Kevn

csshas variables as well. You can use them like this:

css也有变数。您可以像这样使用它们：

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

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

回答by Sunil Rajput

And this is less

这是少

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

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

回答by Hamit YILDIRIM

Variable definitions right:

变量定义正确：

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

All answers is good but question a little different than answers

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

"about Sass. How is SCSS different from CSS": scss is well formed CSS3syntax. uses sass preprocessor to create that.

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

and if I use SCSS instead of CSS will it work the same?yes. if your ide supports sass preprocessor. than it will work same.

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

Sass has two syntaxes. The most commonly used syntax 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.

Sass 有两种语法。最常用的语法称为“SCSS”（意为“Sassy CSS”），是 CSS3 语法的超集。这意味着每个有效的 CSS3 样式表也是有效的 SCSS。SCSS 文件使用扩展名 .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. Files in the indented syntax use the extension .sass.

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

---

---

• Furher Information About:

• 更多信息：

---

---

What Is A CSS Preprocessor?

什么是 CSS 预处理器？

CSS in itself is devoid of complex logic and functionality which is required to write reusable and organized code. As a result, a developer is bound by limitations and would face extreme difficulty in code maintenance and scalability, especially when working on large projects involving extensive code and multiple CSS stylesheets. This is where CSS Preprocessors come to the rescue.

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

A CSS Preprocessor is a tool used to extend the basic functionality of default vanilla CSS through its own scripting language. It helps us to use complex logical syntax like – variables, functions, mixins, code nesting, and inheritance to name a few, supercharging your vanilla CSS. By using CSS Preprocessors, you can seamlessly automate menial tasks, build reusable code snippets, avoid code repetition and bloating and write nested code blocks that are well organized and easy to read. However, browsers can only understand native vanilla CSS code and will be unable to interpret the CSS Preprocessor syntax. Therefore, the complex and advanced Preprocessor syntax needs to be first compiled into native CSS syntax which can then be interpreted by the browsers to avoid cross browser compatibility issues. While different Preprocessors have their own unique syntaxes, eventually all of them are compiled to the same native CSS code.

CSS 预处理器是一种工具，用于通过其自己的脚本语言扩展默认 vanilla CSS 的基本功能。它可以帮助我们使用复杂的逻辑语法，例如变量、函数、mixin、代码嵌套和继承等等，从而增强您的普通 CSS。通过使用 CSS 预处理器，您可以无缝地自动执行琐碎的任务，构建可重用的代码片段，避免代码重复和膨胀，并编写组织良好且易于阅读的嵌套代码块。但是，浏览器只能理解原生的 vanilla CSS 代码，无法解释 CSS Preprocessor 语法。因此，复杂而高级的预处理器语法需要首先编译成原生 CSS 语法，然后由浏览器解释，以避免跨浏览器兼容性问题。

Moving forward in the article, we will take a look at the 3 most popular CSS Preprocessors currently being used by developers around the world i.e Sass, LESS, and Stylus. Before you decide the winner between Sass vs LESS vs Stylus, let us get to know them in detail first.

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

Sass – Syntactically Awesome Style Sheets

Sass - 语法上很棒的样式表

Sass is the acronym for “Syntactically Awesome Style Sheets”. Sass is not only the most popular CSS Preprocessor in the world but also one of the oldest, launched in 2006 by Hampton Catlin and later developed by Natalie Weizenbaum. Although Sass is written in Ruby language, a Precompiler LibSass allows Sass to be parsed in other languages and decouple it from Ruby. Sass has a massive active community and extensive learning resources available on the net for beginners. Thanks to its maturity, stability and powerful logical prowess, Sass has established itself to the forefront of CSS Preprocessor ahead of its rival peers.

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

Sass can be written in 2 syntaxes either using Sass or SCSS. What is the difference between the two? Let's find out.

Sass 可以使用 Sass 或 SCSS 以两种语法编写。两者有什么区别？让我们来了解一下。

Syntax Declaration: Sass vs SCSS

语法声明：Sass 与 SCSS

• SCSS stands for Sassy CSS. Unlike Sass, SCSS is not based on indentation.
• .sass extension is used as original syntax for Sass, while SCSS offers a newer syntax with .scss extension.
• Unlike Sass, SCSS has curly braces and semicolons, just like CSS.
• Contrary to SCSS, Sass is difficult to read as it is quite deviant from CSS. Which is why SCSS it the more recommended Sass syntax as it is easier to read and closely resembles Native CSS while at the same time enjoying with power of Sass.

• SCSS 代表 Sassy CSS。与 Sass 不同，SCSS 不是基于缩进。
• .sass 扩展名用作 Sass 的原始语法，而 SCSS 提供了带有 .scss 扩展名的更新语法。
• 与 Sass 不同，SCSS 有花括号和分号，就像 CSS 一样。
• 与 SCSS 不同，Sass 难以阅读，因为它与 CSS 非常不同。这就是为什么 SCSS 是更推荐的 Sass 语法，因为它更容易阅读并且非常类似于 Native CSS，同时享受 Sass 的强大功能。

Consider the example below with Sass vs SCSS syntax along with Compiled CSS code.

考虑下面的示例，其中包含 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;
    }

In both cases, be it Sass or SCSS, the compiled CSS code will be the same –

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

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

Usage of Sass

Sass的使用

Arguably the most Popular front end framework Bootstrap is written in Sass. Up until version 3, Bootstrap was written in LESS but bootstrap 4 adopted Sass and boosted its popularity. A few of the big companies using Sass are – Zapier, Uber, Airbnb and Kickstarter.

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

LESS – Leaner Style Sheets

LESS - 更精简的样式表

LESS is an acronym for “Leaner Stylesheets”. It was released in 2009 by Alexis Sellier, 3 years after the initial launch of Sass in 2006. While Sass is written in Ruby, LESS is written JavaScript. In fact, LESS is a JavaScript library that extends the functionality of native vanilla CSS with mixins, variables, nesting and rule set loop. Sass vs LESS has been a heated debate. It is no surprise that LESS is the strongest competitor to Sass and has the second-largest user base. However, When bootstrap dumped LESS in favor of Sass with the launch of Bootstrap 4, LESS has waned in popularity. One of the few disadvantages of LESS over Sass is that it does not support functions. Unlike Sass, LESS uses @ to declare variables which might cause confusion with @media and @keyframes. However, One key advantage of LESS over Sass and Stylus or any other preprocessors, is the ease of adding it in your project. You can do that either by using NPM or by incorporating Less.js file. Syntax Declaration: LESSUses .less extension. Syntax of LESS is quite similar to SCSS with the exception that for declaring variables, instead of $ sign, LESS uses @.

LESS 是“Leaner Stylesheets”的首字母缩写。它于 2009 年由 Alexis Sellier 发布，距 2006 年 Sass 首次推出三年后。虽然 Sass 是用 Ruby 编写的，但 LESS 是用 JavaScript 编写的。事实上，LESS 是一个 JavaScript 库，它通过混合、变量、嵌套和规则集循环扩展了原生 CSS 的功能。Sass 与 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;
      }

Usage Of LESSThe popular Bootstrap framework until the launch of version 4 was written in LESS. However, another popular framework called SEMANTIC UI is still written in LESS. Among the big companies using Sass are – Indiegogo, Patreon, and WeChat

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

Stylus

手写笔

The stylus was launched in 2010 by former Node JS developer TJ Holowaychuk, nearly 4 years after the release of Sass and 1 year after the release of LESS. The stylus is written Node JS and fits perfectly with JS stack. The stylus was heavily influenced by the logical prowess of the Sass and simplicity of LESS. Even though Stylus is still popular with Node JS developers, it hasn't managed to carve out a sizeable share for itself. One advantage of Stylus over Sass or LESS, is that it is armed with extremely powerful built-in functions and is capable of handling heavy computing.

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

Syntax Declaration: Stylus Uses .styl extension. Stylus offers a great deal of flexibility in writing syntax, supports native CSS as well as allows omission of brackets colons and semicolons. Also, note that Stylus does not use @ or $ symbols for defining variables. Instead, Stylus uses the assignment operators to indicate a variable declaration.

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

STYLUS SYNTAX WRITTEN LIKE NATIVE CSS

像原生 CSS 一样编写的手写笔语法

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

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

OR

或者

STYLUS SYNTAX WITHOUT CURLY BRACES

不带花括号的手写笔语法

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

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

OR

或者

STYLUS SYNTAX WITHOUT COLONS AND SEMICOLONS

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

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

#box 
    color font-color
    background bg-color