将 Compass/Sass 与另一个 CSS 框架一起使用

Question

我最近开始使用 Compass/Sass 进行 CSS 编码，并且效果很好。我现在正在考虑尝试不同的框架（Skeleton、Foundation、Bootstrap 等）。 对于那些有使用 Compass 经验的人，我的问题是，当您安装一个新框架时，它包括它自己的带有现成类的 css 文件。当你使用 Compass 时，它有你用来修改类和变量的 scss 文件。让我感到困惑的是，我需要转到 css 文件来修改任何默认类，然后返回到 scss 文件以执行 mixins、变量等，这似乎真的是多余且耗时的.

我应该剪切 css 文件中的所有内容并将其粘贴到 scss 文件中以使其更容易吗？或者，如果我想使用带有 Compass 的 Bootstrap 等框架，我应该采取不同的方法吗？

顺便说一句，我还有 compass.app，它允许我一键安装 Foundation 和 Bootstrap。我刚刚发现了另一个名为 Susy 的框架，它看起来也很酷。

谢谢！

Answer 1

如果您更改扩展名，任何 CSS 文件都是有效的 scss，因此我不会过多关注这些文件之间的差异。您可以轻松地将 Compass 与任何框架一起使用，许多框架已移植到 Compass 以实现更好的集成。

另一方面，我认为 Compass 改变了框架可以/应该是什么的想法。 CSS 框架很难维护和使用，因为 CSS 构建时没有考虑到框架抽象。结果是臃肿的、非语义的 API，它们试图做所有事情，但在此过程中偷工减料。你可以做得更好。

Compass 旨在促进更小、更专注的“插件”的共享。 Susy 是这些插件之一，还有更多。你会注意到 Susy 不像 Foundation 或 Bootstrap：它只做网格，而且它以一种没有 Sass 不可能实现的方式来做。这对 API 的可能性产生了很大的影响。许多其他插件也是如此。

我使用自己的 Compass 插件组合来构建适合我需要的定制框架。我建议你也这样做。不要编写所有自己的代码，但要找到自己喜欢的插件来构建自己的框架。我的看起来像这样：

总是：

• 指南针
• 苏西
• 模块化比例
• 断点

根据需要：

• 罗盘-rgbapng
• 动画
• solarized（不是插件，但易于复制/粘贴）
• 时髦的按钮
• 还有很多...

您可以获得快速开发的所有好处，但更多的控制和更好的长期代码。