SCSS和Sass有什么区别？

最新推荐文章于 2024-07-10 10:14:49 发布

p15097962069

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量655

点赞数

文章标签： css sass

原文链接：https://kk.sofbug.com/question/Niyl

版权

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

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

#1楼

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

#2楼

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

#3楼

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

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

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

#4楼

它的语法不同，这是主要的优点（或缺点，取决于您的观点）。

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

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

#5楼

Sass （ 语法上很棒的StyleSheets ）具有两种语法：

较新的： SCSS （ Sassy 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文档

#6楼

原始的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;
}

#7楼

SASS和SCSS之间的差异解释了细节上的差异。不要被SASS和SCSS选项所迷惑，尽管我最初也是.scss是Sassy CSS，并且是下一代.sass。

如果那没有意义，您可以在下面的代码中看到区别。

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

在上面的代码中，我们使用; 分隔声明。我什至将.border的所有声明添加到一行上，以进一步说明这一点。相反，下面的SASS代码必须在不同的行上加上缩进，并且不使用;。

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

您可以从下面的CSS中看到，与旧的SASS方法相比，SCSS样式与常规CSS更加相似。

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

我认为这些天的大多数时候，如果有人提到他们正在使用Sass进行工作，那么他们指的是以.scss而不是传统的.sass方式创作。

#8楼

紧凑的答案：

SCSS是指Sass CSS预处理程序支持的主要语法 。

以.scss结尾的文件表示Sass支持的标准语法。 SCSS是CSS的超集。
以.sass结尾的文件表示源于Ruby世界的Sass支持的“较旧”语法。

#9楼

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

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

#10楼

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

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

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

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

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

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

#11楼

从语言的首页

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

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

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

#12楼

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

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

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

#13楼

SASS是语法上很棒的样式表，是CSS的扩展，提供了嵌套规则，继承，混合功能，而SCSS是Sassy级联样式表，与CSS相似，填补了CSS和SASS之间的空白和不兼容之处。它是根据MIT许可获得许可的。本文详细介绍了不同之处： https ： //www.educba.com/sass-vs-scss/