为什么我们使用 SASS,即使我们使用 SCSS?

Why we are using SASS, even we are using SCSS?

我已经在我的项目中使用 SCSS,但我仍然感到困惑。

为什么我们使用 SASS 即使我们有 SCSS,我们可以在同一个项目中使用 SASS 和 SCSS,它会在同一个项目中工作吗?

Sass 有两种语法。最常用的语法称为“SCSS”(代表“Sassy CSS”),是 CSS3 语法的超集。这意味着每个有效的 CSS3 样式表也是有效的 SCSS。 SCSS 个文件使用扩展名 .scss。

第二种较旧的语法称为缩进语法(或简称为“.sass”)。受 Haml 简洁的启发,它适用于喜欢简洁而不是相似性的人 CSS。它不使用方括号和分号,而是使用行的缩进来指定块。缩进语法中的文件使用扩展名 .sass.

SCSS

$blue: #3bbfce;

$margin: 16px;

.content-navigation { 

  border-color: $blue;

  color: darken($blue, 9%);

}

.border {

  padding: $margin / 2; 

 margin: $margin / 2;

 border-color: $blue;

}

SASS

$blue: #3bbfce

$margin: 16px


.content-navigation

  border-color: $blue

  color: darken($blue, 9%)


.border

  padding: $margin / 2

  margin: $margin / 2

  border-color: $blue


CSS

.content-navigation {

  border-color: #3bbfce;

  color: #2b9eab;

}

.border {

  padding: 8px;

  margin: 8px;

  border-color: #3bbfce;

}