52

我知道这是一个愚蠢的问题，但我一直在搜索谷歌，但找不到任何答案：/那么 SASS 和 Compass、SASS 和 SCSS 之间有什么区别？我对此感到非常困惑。

感谢您提供任何信息:)

4

4 回答 4

80

冒着过于简单化的风险，Compass是一个框架，而Sass是一种语言抽象。您在 Compass 上下文中编写 Sass 代码（并将其编译为标准 CSS）。SCSS 只是 Sass 语言的最新语法。据我所知，它的唯一目的是在语法上更像 CSS。Sass 的所有语法糖，但对熟悉 CSS 的前端开发人员来说更熟悉。

于 2010-11-08T01:15:21.237 回答
20

一般来说：“Sass”是 css 预处理器的名称 - 意思是：开发人员编写自动编译为普通 css 代码的短形式占位符的有用工具。Sass 有两种不同的短格式代码编写方式：SCSS 和 SASS。SCSS 和 SASS 的区别很简单：SCSS 是普通的 CSS 附加功能。每个 CSS 文件都可以重命名为 .scss 并进行验证。SASS 通过跳过所有大括号来使用较短的书写形式。要将 .css 文件转换为有效的 .sass 文件，您需要更改 css 代码。

Compass 是一个所谓的 css 框架，通过命令行工具进行控制。Compass 通过提供预定义的函数、mixin 等来支持开发，以加快编码速度并防止编写错误。例如，compass 允许您通过编写“@include box-shadow();”来调用带有所有 polyfill 的 box-shadow。在使用“compass compile”编译文件时，所有 css 代码都是由 compass 本身添加的。Compass 是用于大型前端开发项目的最常用工具之一。

于 2014-05-11T13:38:04.300 回答
14

我提供了一个 TLDR 答案：

Compass 本质上是一个 SASS 库。它使用 sass 的原始语言并创建通用的可重用函数。

从网站：

Compass 使用 Sass。

Sass 是 CSS3 的扩展，它添加了嵌套规则、变量、混合、选择器继承等。Sass 生成格式良好的 CSS 并使您的样式表更易于组织和维护。

于 2012-05-12T19:53:55.033 回答
7

Compass 是一个用 Sass 构建的框架。另一个流行的 Sass 框架是Bourbon和Susy。这意味着，所有这些框架都是用 Sass 编写的。它们只是具有预定义的函数和 mixin，您可以使用它们来加速您的工作流程。

SCSS (Sassy Sass) 只是 Sass 的新语法。它使用 CSS 语法。例如：

h2 {
  color: red;
}

另一方面，Sass 使用不那么“严格”的语法：

h2 
  color: red

请注意，没有使用大括号和分号。此外，您必须使用缩进。

总而言之，你将使用什么框架或 Sass 语法，这是你的选择！

于 2015-02-17T14:24:44.243 回答