所有这些CSS框架和其他框架有什么用呢?

时间:2011-03-23 21:35:41

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

我正在深入研究CSS世界,我在理解存在的所有内容时遇到了一些困难。

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

4 个答案:

答案 0 :(得分:13)

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

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

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

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

然而,编写CSS并不需要这些,并且在大多数情况下,甚至还不足以真正研究CSS。虽然我喜欢SASS的功能,但它并不适合所有人,最终会产生比必要的更臃肿的CSS。

如果您刚开始尝试使用CSS,我会推荐像Andy Clarke这样的Transcending CSS和Hardboiled Web Design等资源。用于Web设计人员的HTML5和用于Web设计人员的CSS3也是非常好的资源。对HTML标记和语义的充分理解对于利用CSS并正确使用它也很重要。

答案 1 :(得分:3)

HAML SASS 在一起, HAML 是用于编写HTML的快捷语言, SASS(或SCSS)是用于编写 CSS 的快捷语言,您必须知道如何编写HTML / CSS“longhand”才能充分利用HAML / SASS快捷方式版本。

快捷方式只能在DEV中使用,除非你有一个RUBY服务器 - 当我看到上述两种语言都是“哑”语言的“替代”时,我真的很生气。特别是你需要的只是搜索是“CSS是愚蠢的”来查找对SASS / SCSS的引用 - 这是一个恶毒的linkbait ploy;)你不能在不了解其他的情况下使用它

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

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

BLUEPRINT 是一个可以与普通CSS或快捷方式一起使用的框架(免责声明:我不喜欢框架,因为它们添加了不必要的类)如果你想在其中使用蓝图或雅虎网格框架指南针/ SaSS / LESS然后你会更好地理解他们在犯下试图使他们的实现变得更容易的工具之前先做的事情 - 这些工具不会使这些框架工作,但是他们会做出你必须做的输入量如果你真的想要使用它们会减少。

我最近尝试过LESS / SaSS和SCSS ..我喜欢它们,但后来我知道如何编写CSS,我不希望他们做的更多,而不是成为让我的生活更轻松的工具..他们不要比CSS更好地“做”CSS,但是他们可以嵌套和组织你的CSS,我非常喜欢!

答案 2 :(得分:2)

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

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

不使用这些东西的一个非常令人信服的理由是,它为任何加入项目的开发人员或想要从一台机器移动到另一台机器的开发人员或需要他们的机器均匀化的开发人员团队显着提高了安装要求为了贡献。例如,要求安装ruby或各种python版本或php存根以基于时间戳等动态编译css,所有这些都将像SASS这样的工具改变为一种可能非常复杂的东西。 / p>

有了CSS3的承诺,这些工具希望促进的许多东西都将过时。

答案 3 :(得分:-1)

在很长一段时间内,使用SASS + Compass + Suzy是我网络开发工作流程中最大的新鲜空气。使用这些工具设计漂亮的流体/弹性/固定自定义网格布局非常快。我只希望早点知道他们。

CleverCSS是一个Python程序,与我讲的几乎完全相同,尽管你不能用CleverCSS做@import。 SASS在每个CSS选择器之后都没有分号,只有CSS属性,而CleverCSS在两者之前都有分号(这使得它在语法上比IMO更差)。

This article很高兴看看你是否是Django / Python的人。如果您决定使用SASS而不是CleverCSS或其他人,您将不会感到肮脏。只需将其搞砸并安装Ruby并设置SASS / Compass即可观看文件夹并在保存.sass文件时自动生成CSS。如果您想保存更改,请不要弄乱生成的CSS文件。没有进一步的整合"否则你需要全部的Python设置。