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

Question

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

为什么即使我们有SCSS也要使用SASS，并且我们可以在同一项目中使用SASS和SCSS，它可以在同一项目中工作吗？

Answer 1

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;

}