📌  相关文章
📜  SASS与SCSS

📅  最后修改于: 2020-12-25 03:42:48             🧑  作者: Mango

Sass和SCSS

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语法的原因，因此使其非常易于学习和使用。