2

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

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

4

4 回答 4

13

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 并正确使用它也很重要。

于 2011-03-23T22:06:23.383 回答
3

HAMLSASS结合在一起,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 的嵌套和组织,我真的很喜欢!

于 2011-03-23T22:17:52.537 回答
2

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

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

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

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

于 2015-03-13T01:39:14.497 回答
-1

长期以来,使用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 设置进一步“集成”。

于 2011-07-10T00:24:50.663 回答