sass - CodePen 中的 Sass 和 Scss 选项有什么区别？

Question

在 CodePen 中，CSS 可以有 CodePen 提出的一系列预处理器。我想.scss使用 Sass 在文件中编写一些 CSS。

但是，在 CodePen 上，他们建议将 SCSS 和 Sass 作为 2 个独立的预处理器——我应该选择哪一个？

Answer 1

新的主要语法（从 Sass 3 开始）被称为“SCSS”（代表“Sassy CSS”），是 CSS3 语法的超集。这意味着每个有效的 CSS3 样式表也是有效的 SCSS。SCSS 文件使用扩展名 .scss。第二种较旧的语法称为缩进语法（或简称为“Sass”）。

Sass 和 SCSS 在语法上有所不同，但是，您可以互换使用两者.scss和.sass扩展，因为 SCSS 进程会自动知道差异，但在 codepen 上并非如此，您必须指定您将写入的确切语法。

#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 语法

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

在此处阅读更多内容以查看哪种语法更好： https ://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better