为啥我们使用 SASS，甚至我们使用 SCSS？ [复制]

Posted 2023-03-06

【中文标题】为啥我们使用 SASS，甚至我们使用 SCSS？ [复制]

【英文标题】：Why we are using SASS, even we are using SCSS? [duplicate]为什么我们使用 SASS，甚至我们使用 SCSS？ [复制]

【发布时间】：2019-08-10 18:25:21

【问题描述】：

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

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

【问题讨论】：

***.com/questions/5654447/…

【参考方案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;

【讨论】：

tnx 这么多我理解得很好。

谢谢。这是我发现的唯一答案，可以清楚地解释两者之间的区别。