Sass 和 CodePen 中的 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

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

What's the difference between Sass and Scss options in CodePen?

sass

codepen