Sass 与 Scss

开发 Sass 的主要原因是为了让 CSS 编写更高效、更出色。如果您正在寻找一门预处理语言来学习，我强烈推荐 Sass。为什么选择 Sass？点击此处了解详情。在解释 Sass 和 Scss 的区别以及哪个更值得使用之前，我首先想解释一下 Sass 的概念。

萨斯

Sass 的全称是“ Syntactically A Wesome Style Sheet”（语法上很棒的样式表）。Sass 是一种预处理器脚本语言，可以解释或编译为层叠样式表 (CSS)。它与所有版本的 CSS 完全兼容。Sass 可以免费下载和使用。

样式表越来越大、越来越复杂，维护起来也越来越困难。这时 CSS 预处理器就能派上用场了。

它允许您使用变量、嵌套规则、混合、函数等，所有这些都具有完全兼容 CSS 的语法。

Sass 有两种语法，即 Sass 和 Scss。

Sass 与 Scss

最常用的语法是“SCSS”（即“Sassy CSS”），它继承了我们熟悉的 CSS 语法，并赋予了 Sass 的强大功能。这意味着所有有效的 CSS3 样式表也都是有效的 SCSS。SCSS 文件使用.scss作为扩展名。这非常方便，因为将常规 CSS 样式转换为 Scss 变得更加容易。

/* SCSS */
$primary-color: #3bbfce;
$secondary-color: #ff8700;

.content {
  background-color: $primary-color;
  color: darken($secondary-color, 9%);
}

第二种语法（旧语法）是 Sass，它的创建目的是让 CSS 更加出色，并通过去除花括号和分号来提高 CSS 代码的编写效率，它使用行缩进来指定块。采用缩进语法的文件使用.sass作为扩展名。

/* SASS */
$primary-color: #3bbfce
$secondary-color: #ff8700

.content-navigation
  background-color: $primary-color
  color: darken($secondary-color, 9%)

通过上面的解释，您可以正确地看到 Sass 和 Scss 之间的区别，下一个问题是我应该学习哪一个或应该使用哪一个。

事实是没有人应该为你回答这个问题，你应该知道什么最适合你，哪一个适合你的编写代码模式。

对我来说，我一直不太喜欢 Sass 的语法，因为我已经习惯了用花括号和分号。而且 Scss 在团队协作时总是很有用，所以我一直用不上它。

但你必须自己做出决定！

你可能想了解更多关于 Sass 的知识。请查看他们的文档！

一如既往，如有任何问题或建议，请随时留言或发推文给我🤭！记得在社交媒体上与我联系！😎