scss和sass区别_Sass和SCSS有什么区别？

最新推荐文章于 2024-05-15 16:15:46 发布

culi4814

最新推荐文章于 2024-05-15 16:15:46 发布

阅读量2.7k

点赞数 1

文章标签： java python 人工智能编程语言 javascript ViewUI

原文链接：https://www.sitepoint.com/whats-difference-sass-scss/

版权

scss和sass区别

This is the updated version of an article originally published on April 28, 2014.

这是最初于2014年4月28日发布的文章的更新版本。

I’ve written a lot on Sass, but some comments I got made it clear that not everyone knows exactly what Sass refers to. Here’s a bit of clarity:

我已经在Sass上写了很多东西，但是我得到的一些评论清楚地表明，并不是每个人都确切知道Sass指的是什么。这有点清楚：

When we talk about Sass, we usually refer to the preprocessor and the language as a whole. We’ll say, for example, “we are using Sass”, or “here is a Sass mixin”. Meanwhile, Sass (the preprocessor) allows two different syntaxes:

在谈论Sass时 ，我们通常指的是预处理器和整个语言。例如，我们将说“我们正在使用Sass”或“这是Sass mixin”。同时，Sass(预处理器)允许两种不同的语法：

Sass, also known as the indented syntax
Sass ，也称为缩进语法
SCSS, a CSS-like syntax
SCSS ，类似于CSS的语法

萨斯的历史 (History of Sass)

Initially, Sass was part of another preprocessor called Haml, designed and written by Ruby developers. Because of that, Sass stylesheets were using a Ruby-like syntax with no braces, no semi-colons and a strict indentation, like this:

最初，Sass是另一个名为Haml的预处理器的一部分，该预处理器由Ruby开发人员设计和编写。因此，Sass样式表使用的是类似Ruby的语法，没有大括号，没有分号和严格的缩进，如下所示：

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
  -webkit-border-radius= !radius
  -moz-border-radius= !radius
  border-radius= !radius

.my-element
  color= !primary-color
  width= 100%
  overflow= hidden

.my-other-element
  +border-radius(5px)

As you can see, this is quite a change compared to regular CSS! Even if you’re a Sass (the preprocessor) user, you can see this is pretty different from what we are used to. The variable sign is ! and not $, the assignment sign is = and not :. Pretty weird.

如您所见，与常规CSS相比，这是一个很大的变化！即使您是Sass(预处理器)用户，您也可以看到这与我们以前的习惯完全不同。可变符号是! 不是$ ，分配符号是=而不是: 。很奇怪

But that’s how Sass looked like until version 3.0 arrived in May 2010, introducing a whole new syntax called SCSS for Sassy CSS. This syntax aimed at closing the gap between Sass and CSS by bringing a CSS-friendly syntax.

但这就是Sass在3.0版于2010年5月问世之前的样子，它引入了一种全新的语法，称为SCSS for Sassy CSS 。该语法旨在通过引入CSS友好语法来缩小Sass与CSS之间的差距。

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.my-element {
  color: $primary-color;
  width: 100%;
  overflow: hidden;
}

.my-other-element {
  @include border-radius(5px);
}

SCSS is definitely closer to CSS than Sass. That being said, Sass maintainers have also worked to make both syntaxes closer to each other by moving ! (variable sign) and = (assignment sign) from the indented syntax to $ and : from SCSS.

SCSS绝对比Sass更接近CSS。话虽如此，Sass维护人员还通过移动!来使两种语法更加接近! 缩进语法中的(变量符号)和= (赋值符号)从SCSS转换为$和: 。

Now, when starting a new project, you may wonder which syntax you should use. Let me enlighten the path and explain the pros and cons of each syntax.

现在，当开始一个新项目时，您可能想知道应该使用哪种语法。让我启发一下道路，并解释每种语法的利弊。

Sass缩进语法的优点 (Pros for Sass Indented Syntax)

While this syntax might look weird, it has some interesting points. First of all, it is shorter and easier to type. No more braces and semi-colons, you don’t need all that stuff. Even better! No need for @mixin or @include, when a single character is enough: = and +.

尽管此语法看起来很怪异，但它有一些有趣的地方。首先，它更短，更容易键入 。不再需要花括号和分号，您不需要所有这些东西。更好！当一个字符就足够时，不需要@mixin或@include ： =和+ 。

Also the Sass syntax enforces clean coding standards by relying on indentation. Because a wrong indent is likely to break the whole .sass stylesheet, it makes sure the code is clean and well formatted at all times. There is one way to write Sass code: the good way.

此外，Sass语法通过依赖缩进来强制执行干净的编码标准 。由于错误的缩进可能会破坏整个.sass样式表，因此可以确保代码始终干净且格式正确。编写Sass代码的方法有一种：好的方法。

But beware! Indenting means something in Sass. When indenting a selector, it means it is nested into the previous selector. For instance:

但是要当心！缩进意味着 Sass中的东西。缩进选择器时，表示它嵌套在前一个选择器中。例如：

.element-a
  color: hotpink

    .element-b
      float: left

… will output the following CSS:

…将输出以下CSS：

.element-a {
  color: hotpink;
}

.element-a .element-b {
  float: left;
}

The simple fact of pushing .element-b one level to the right means it is a child of .element-a, changing the resulting CSS. Be very careful with your indentation!

向右推.element-b一个简单的事实意味着它是.element-a的子.element-a ，更改了结果CSS。小心缩进！

As an aside, I feel like the indentation based syntax will probably suit a Ruby/Python team more than a PHP/Java team (although this is debatable, and I’d love to hear opinions to the contrary).

顺便说一句，我觉得基于缩进的语法可能更适合Ruby / Python团队而不是PHP / Java团队(尽管这值得商bat，我很想听听相反的意见)。

SCSS语法的优点 (Pros for SCSS Syntax)

For starter, it is fully CSS compliant. It means, you can rename a CSS file in .scss and it will just work. Making SCSS fully compatible with CSS has always been a priority for Sass maintainers since SCSS was released, and this is a big deal in my opinion. Moreover, they try to stick as close as possible to what could become a valid CSS syntax in the future (hence @directives).

首先，它完全符合CSS要求 。这意味着，您可以在.scss重命名CSS文件，它将正常工作 。自从SCSS发布以来，使SCSS与CSS完全兼容一直是Sass维护人员的优先考虑的事情，我认为这是很大的事情。而且，他们尝试尽可能地贴近将来可能成为有效CSS语法的内容(因此@directives )。

Because SCSS is compatible with CSS, it means there is little to no learning curve. The syntax is already known: after all, it’s just CSS with a few extras. This is important when working with inexperienced developers: they will be able to quickly start coding without knowing the first thing about Sass.

由于SCSS与CSS兼容，这意味着几乎没有学习曲线 。语法是已知的：毕竟，它只是CSS，还有一些其他功能。与经验不足的开发人员一起工作时，这一点很重要：他们将能够快速开始编码，而无需了解Sass的第一手资料。

Moreover, it is easier to read because it actually makes sense. When you read @mixin, you know it is a mixin declaration; when you see @include, you are calling a mixin. It doesn’t make any shortcuts, and everything makes sense when read out loud.

此外，它更容易阅读，因为它确实有意义。当您阅读@mixin ，您知道它是一个mixin声明；当您看到@include ，您正在调用mixin。它没有任何捷径，大声读出时一切都有意义。

Also, most existing tools, plugins and demos for Sass are developed using the SCSS syntax. As time goes, this syntax is becoming pre-eminent and the default choice, mostly for the above reasons.

而且，大多数现有的Sass工具，插件和演示都是使用SCSS语法开发的。随着时间的流逝，主要由于上述原因，该语法正变得越来越突出，并且成为默认选择。

最后的想法 (Final Thoughts)

The choice is up to you, but unless you have really good reasons to code using the indented syntax, I would strongly suggest using SCSS over Sass. Not only is it simpler, but it is also more convenient.

选择取决于您，但是除非您有充分的理由使用缩进语法进行编码，否则我强烈建议您在Sass上使用SCSS。它不仅更简单，而且也更加方便。

I once tried the indented syntax myself and liked it. I liked how short and easy it was. I was actually about to move an entire code base to Sass at work before changing my mind at the last minute. I thank my past-self for halting that move, because it would have been very difficult to work with several of our tools had we used the indented syntax.

我曾经亲自尝试过缩进语法并喜欢它。我喜欢那又短又容易。实际上，在最后一刻改变主意之前，我实际上打算将整个代码库移交给Sass。我感谢我过去的努力停止了这一步，因为如果使用缩进语法，使用我们的一些工具将非常困难。

Also, please note Sass is never in uppercase, no matter whether you’re talking about the language or the syntax. Meanwhile, SCSS is always in uppercase. Need a reminder? SassnotSASS.com to the rescue!

另外，请注意，无论您是在谈论语言还是语法， Sass都不会大写。同时， SCSS始终为大写。需要提醒吗？ SassnotSASS.com进行救援！