为什么我们使用 SASS，甚至我们使用 SCSS？

Question

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

为什么我们有 SCSS 还要使用 SASS，我们可以在同一个项目中使用 SASS 和 SCSS，它会在同一个项目中工作吗？

Answer 1

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

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

社会保障局

$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;

}