css - 所有这些 CSS 框架和其他框架是怎么回事？

Question

我正在深入研究 CSS 的世界，但在理解所有存在的东西的使用方面遇到了一些困难。

有LESS、SASS、Compass、Blueprint、HAML等，我应该一起使用哪些？有人可以解释一下彼此之间的关系吗？

Answer 1

LESS 和 SASS 是服务器端 CSS 生成框架——它们允许您使用接近 CSS 的语法创建样式表，但允许您使用变量和函数等项目。然后编译这些文件将生成一个您使用的 CSS 文件。这里需要注意的重要一点是，SASS 仅适用于 Ruby。

HAML 是另一个仅适用于 Ruby，但不支持 CSS 的项目。它实际上是创建 ERB（Ruby 局部视图）的替代方法。

Compass 是一个添加在 SASS 框架之上的库，允许更多的功能和几个默认的类/样式。

Blueprint 是另一个库，它基本上是一个带有预设类的 CSS 文件，允许创建多列布局等常见用例。

然而，这些都不是编写 CSS 所需要的，而且在大多数情况下，它们甚至还不够好，无法真正研究。虽然我喜欢 SASS 的功能，但它实际上并不适合所有人，并且最终会创建不必要的臃肿 CSS。

如果您刚开始尝试 CSS，我会推荐诸如 Transcending CSS 和 Andy Clarke 的 Hardboiled Web Design 之类的资源。网页设计师的 HTML5 和网页设计师的 CSS3 也是非常好的资源。对 HTML 标记和语义的良好理解对于利用 CSS 并正确使用它也很重要。

Answer 2

HAML和SASS结合在一起，HAML是一种编写 HTML 的快捷语言，SASS（或 SCSS）是一种编写CSS的快捷语言， 您必须知道如何同时编写 HTML/CSS “通俗易懂”，以便充分利用HAML/SASS 快捷方式版本。

快捷方式只能在 DEV 中使用，除非您有 RUBY 服务器 - 当我看到上述两种语言都是“愚蠢”语言的“替代品”时，我真的很生气。特别是您需要搜索的是“CSS 是愚蠢的”来查找对 SASS/SCSS 的引用——这是一种恶毒的链接诱饵策略；）你不能在不知道另一个的情况下使用一个

COMPASS是一个 Ruby Gem，有助于在本地环境中编译 HAML 和 SASS/SCSS（到 HTML 和 CSS） - 在开发环境中，这意味着通过这些语言所做的更改将被编译为“正确”的 HTML 和 CSS 服务器端在合适的服务器上

LESS是 SASS 的 javascript 等价物。您可以在服务器端（通过 node.js）或客户端（通过导入一个 js 文件）使用它，它采用您编写的快捷方式并将其编译为有效的 CSS（具有多浏览器或供应商扩展）

BLUEPRINT是一个可以与纯 CSS 或快捷方式一起使用的框架（免责声明：我不喜欢框架，因为它们添加了不必要的类）如果您想在 Compass/SaSS/LESS 中使用 Blueprint 或 Yahoo Grids 框架，那么您最好在指责那些试图让他们的实现更容易的工具之前，先了解他们在做什么——这些工具不会使这些框架工作，但是如果你真的想使用它们，它们会减少你必须做的打字量。

我最近尝试了 LESS/SaSS 和 SCSS .. 我喜欢它们，但我首先知道如何编写 CSS 我不希望它们做更多的事情，只是成为让我的生活更轻松的工具.. 他们不“做” CSS 比 CSS 已经做得更好，但是他们可以做 CSS 的嵌套和组织，我真的很喜欢！

Answer 3

您真的不应该出于任何原因使用任何这些“语言”或“工具”。它们将自己呈现为多浏览器或参数化 css 生成器的快捷方式，这是一个好主意，但最终这些事情可以通过许多其他方式非常优雅地使用普通的旧 CSS 来实现。

它们不应该替代使用普通的旧 CSS，并且它们可以生成的膨胀在许多情况下阻止了这种可能性。

不使用这些东西的一个非常令人信服的理由是，它显着提高了任何加入项目的开发人员的安装要求，或者想要从一台机器转移到另一台机器的开发人员，或者需要他们的机器同质化以便做出贡献的开发人员团队. 比如需要安装ruby，或者各种python版本，或者php stubs来根据时间戳动态编译css等等，都把SASS这种想要简单的工具变成了一个可能很复杂的东西。

随着 CSS3 的承诺，这些工具希望促进的许多事情都将过时。

Answer 4

长期以来，使用SASS + Compass + Suzy为我的 Web 开发工作流程带来了最大的新鲜空气。使用这些工具设计漂亮的流体/弹性/固定的自定义网格布局非常快。我只希望我能早点知道他们。

据我所知，CleverCSS 是一个与 SASS 几乎相同的 Python 程序，尽管您不能使用 CleverCSS 执行 @import。此外，SASS 在每个 CSS 选择器之后没有分号，只有 CSS 属性，而 CleverCSS 在两者之前都有分号（这使得它在语法上更劣于 IMO）。

如果你是 Django / Python 人，这篇文章很适合看看。如果您决定使用 SASS 而不是 CleverCSS 或其他方式，您不会感到肮脏。只需安装 Ruby 并设置 SASS / Compass 以查看文件夹并在保存 .sass 文件时自动生成 CSS。如果要保存更改，请不要弄乱生成的 CSS 文件。不需要与您的其他全 Python 设置进一步“集成”。