SCSS 和 Sass 有什么区别?

根据我的阅读,Sass 是一种语言,它通过变量和数学支持使 CSS 更加强大。

SCSS 有什么区别?是否应该使用相同的语言?类似?不同?

答案

Sass 是具有语法改进功能的 CSS 预处理器。程序将处理高级语法的样式表,并将其转换为常规 CSS 样式表。但是,它们并未扩展 CSS 标准本身。

支持并可以使用 CSS 变量,但不能像预处理器变量那样使用 CSS 变量。

SCSS 和 Sass 之间的区别是, Sass 文档页面上的此文本应回答以下问题:

Sass 有两种语法。第一个被称为 SCSS(Sassy CSS),在本参考文献中一直使用,它是 CSS 语法的扩展。这意味着每个有效的 CSS 样式表都是具有相同含义的有效 SCSS 文件。下文描述的 Sass 功能增强了此语法。使用此语法的文件扩展名为.scss

第二种或更旧的语法 (称为缩进语法(有时也称为 “Sass”))提供了一种更为简洁的 CSS 编写方式。它使用缩进而不是方括号来表示选择器的嵌套,并使用换行符而不是分号来分隔属性。使用此语法的文件扩展名为.sass

但是,所有这些仅适用于最终创建 CSS 的 Sass 预编译器。它不是 CSS 标准本身的扩展。

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

区别在于 UI。在文本外部之下,它们是相同的。这就是 sass 和 scss 文件可以相互导入的原因。实际上,Sass 具有四个语法解析器:scss,sass,CSS 和更少的语法解析器。所有这些将不同的语法转换为抽象语法树 ,然后通过 sass-convert 工具将其进一步处理为 CSS 输出或什至其他格式之一。

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

在萨斯.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)。

Sass语法上很棒的 StyleSheets )具有两种语法:

  • 较新的: SCSSSassy CSS
  • 还有一个较旧的原始:indent 语法,它是原始的Sass ,也称为Sass

因此它们都是Sass预处理程序的一部分,具有两种可能的语法。

SCSS和原始Sass之间最重要的区别是:

SCSS

  • 语法类似于CSS (以至于每个常规有效的CSS3也是有效的SCSS ,但是显然不会发生相反方向的关系)

  • 使用花括号{}

  • 使用分号;
  • 作业标志为:
  • 要创建一个mixin,它使用@mixin指令
  • 要使用mixin ,它在@include指令之前
  • 文件扩展名为.scss

原始的Sass

  • 语法类似于Ruby
  • 没有大括号
  • 没有严格的缩进
  • 没有分号
  • 分配符号是=而不是:
  • 要创建一个 mixin,它使用=符号
  • 要使用mixin ,请在其前面加上+
  • 文件扩展名为.sass

一些人更喜欢Sass (原始语法),而另一些人更喜欢SCSS 。不管哪种方式,但值得注意的是Sass 的缩进语法尚未被使用,也永远不会被弃用

sass-convert 的转换

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

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

Sass 和 SCSS 文档

它的语法不同,这是主要的优点(或缺点,取决于您的观点)。

我将尽量不重复别人所说的话,您可以轻松地用谷歌搜索,但是我想从我的经验中说出两件事,有时甚至是在同一项目中。

SASS 专业版

  • 更清洁 - 如果您来自 Python,Ruby(甚至可以使用类似符号的语法编写道具)或 CoffeeScript 世界,那么这对您来说将是很自然的 - 编写 mixin,函数以及通常在.sass可重用的东西很多比.scss (主观)更 “容易” 和可读。

SASS 缺点

  • 空格敏感(主观),我不介意使用其他语言,但是在 CSS 中,它让我感到困扰(问题:复制,制表符与空间大战等)。
  • 没有内联规则(这对我来说是个大难题),您不能执行body color: red就像在. scss body {color: red}
  • 导入其他供应商的东西,复制原始 CSS 片段 - 不是没有可能,但一段时间后很无聊。解决的办法是要么有.scss文件(与一起.sass项目中的文件),或者将它们转换为.sass

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

现在,我想要做的是在写混入和变量.sass和代码,将实际编译到 CSS 中.scss如果可能的话(即 Visual Studio 中没有用于支持.sass但每当我 on Rails 的项目,我平时工作将其中的两个结合起来,而不是放在一个文件中 c)。

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

而 finaly 混入了.scss VS .sass语法比较:

// 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

语言首页

Sass 有两种语法。 新的主要语法(从 Sass 3 开始)被称为 “SCSS”(对于 “Sassy CSS”) ,并且是 CSS3 语法的超集。这意味着每个有效的 CSS3 样式表也都是有效的 SCSS。 SCSS 文件使用扩展名. scss。

第二种较旧的语法称为缩进语法(或简称为 “Sass”)。受 Haml 简洁的启发,它是为那些喜欢简洁而不是 CSS 相似性的人们设计的。代替括号和分号,它使用行的缩进来指定块。尽管不再是主要语法,但缩进语法将继续受到支持。缩进语法的文件使用扩展名. sass。

SASS 是一种吐出 CSS 的解释型语言。 Sass 的结构看起来像 CSS(远程),但是在我看来,描述有点误导;它不是 CSS 的替代品,或延期。它是一个解释器,最终吐出 CSS,所以 Sass 仍然具有普通 CSS 的局限性,但是它用简单的代码掩盖了它们。

基本区别是语法。尽管 SASS 的语法宽松,带有空格,没有分号,但 SCSS 更类似于 CSS。

SASS 代表语法很棒的样式表。它是 CSS 的扩展,为基本语言增添了力量和优雅。 SASS 被重新命名为 SCSS,但带有一些名称,但旧的 SASS 也存在。在使用 SCSS 或 SASS 之前,请注意以下区别。

在此处输入图片说明

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

萨斯

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

有关更多指南,请访问官方网站

Sass 是第一个,语法有点不同。例如,包括一个混合:

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

Sass 忽略花括号和分号,而是放在嵌套上,我发现它更有用。

原始的sass类似于 ruby 语法,类似于 ruby,jade 等。

在这些语法中,我们不使用{} ,而是使用空格,也没有使用; ...

scss语法更像CSS ,但是有更多的选择,例如:嵌套,声明等,类似于less CSS和其他预处理CSS ...

他们基本上都做相同的事情,但是我分别放几行以查看语法差异,看一下{};spaces

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}