所有这些 CSS 框架和其他框架是怎么回事？ [关闭]答案

【问题标题】：What's up with all these CSS frameworks and others? [closed]所有这些 CSS 框架和其他框架是怎么回事？ [关闭]
【发布时间】：2011-07-21 16:19:19
【问题描述】：

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

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

【问题讨论】：

如果你正在学习 CSS，你不需要知道任何这些。只需学习 CSS。稍后，您可能会发现人们为什么要建造所有其他东西。
它们就像谷物品牌。真的取决于什么最适合你。
没有人提到[Stylus](learnboost.github.com/stylus/);它是 LESS 和 SASS 的较新版本，但在我看来明显优于其他所有其他版本。
不要，我认为他们很烂。
@ChrisMorgan：为什么会这样？

标签： css sass less compass-sass blueprint-css

【解决方案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 并正确使用它也很重要。

【讨论】：

不是真的！ CleverCSS 是 SASS 的纯 Python 实现，可以用作 ruby SASS gem 的替代品
那将是 CleverCSS 而不是 SASS。要使用 SASS，您需要 Ruby，或者它的某个版本，例如 JRuby。
我指的是“这里要注意的重要一点是，SASS 仅适用于 Ruby。”我使用 CleverCSS 在我的 django 应用程序中使用 SASS 标记，它支持所有重要的 SASS 功能。
SASS 的端口不是 SASS。通过实际项目，您可以立即获得更新，例如 SCSS。使用像 CleverCSS 这样的端口，您必须等到该项目实施更新。项目的一个端口与原始项目不同。但是，是的，有几个可用的端口可以将 SASS 功能引入其他语言。
Less 现在也有客户端支持。

【解决方案2】：

HAML和SASS在一起，HAML是编写HTML的快捷语言，SASS（或SCSS） 是一种用于编写 CSS 的快捷语言，您必须知道如何“速写” HTML/CSS 才能充分利用 HAML/SASS 快捷版本。

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

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

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

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

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

【讨论】：

框架是你可以“即插即用”的东西 HAML/SASS/LESS 不是框架，它们是工具，蓝图/YUI 网格是框架，你可以完整地“插入”代码并使用您需要的任何课程

【解决方案3】：

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

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

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

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

【讨论】：

点赞！我认为其中一半现在也适用于 jQuery 和（大部分）它的插件，但是很多人倾向于开始使用东西，因为“它很时髦”，或者因为它在它出现时是一个很好的资产，但不能与时俱进。恕我直言，SASS 之类的东西可能都有一个伟大的意图，并且在某些情况下确实有帮助，但大多数时候它们只会导致夸大其词、难以管理、无法支持的东西。

【解决方案4】：

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

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

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

【讨论】：