Sass vs SCSS

Sass vs SCSS

Sass vs SCSS

Sass提供了两种不同的语法:

Sass
SCSS

两者相似并且做同样的事情,但是写法不同。 SCSS是最新的一种,并且被认为比Sass更好。

SASS与SCSS之间的区别

Sass: Sass源自另一个称为Haml的预处理器。它是由Ruby开发人员设计和编写的,因此,Sass样式表使用类似Ruby的语法,没有大括号,没有分号和严格的缩进。在Sass中,可变符号为!
请参见以下示例:
// 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)

SCSS: : SCSS提供CSS友好的语法来缩小Sass与CSS之间的距离。 SCSS称为Sassy 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绝对比Sass更接近CSS。
Sass语法的优势:
Sass的语法是与CSS完全不同,但更短,更容易键入。当一个字符就足够时,您无需键入分号或大括号,甚至无需使用@mixin或@include: =和+。
它还提供了简洁的编码标准,因为它遵循缩进
SCSS语法的优点:
它与CSS完全兼容。您可以将CSS文件重命名为.scss扩展名,该文件也将起作用。由于它遵循CSS语法的原因,因此非常易于学习和使用。