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

Question

在CodePen中，CSS可以有CodePen提出的一系列预处理器。我想使用 Sass 在 .scss 文件中编写一些 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