学习Haml和Sass值得吗？

Question

学习Haml和Sass值得吗？

hamlsass

27

根据你的职业经验，haml和sass有没有被证明是有用的？以何种方式？

- Victor

请查看我对“Haml”的回答：http://stackoverflow.com/questions/93540/your-attitude-to-haml/97884#97884 - mislav

3个回答

9

我的当前网站有超过800个Haml文件和150个Sass文件，可以告诉你这对我的开发非常有帮助。

最大的好处在于快速开发：创建Haml / Sass文件需要更少的打字，因此您可以用比erb模板更少的按键完成展示逻辑。

我也发现Haml文件更容易阅读，并且出错率更低。

你的情况可能不同，但我已经达到了不使用Haml感觉像一项任务的地步。

- Evil Trout

150个Sass文件？那太庞大了（也很令人印象深刻！）我想听更多关于这个实现的细节。你有博客或其他地方可以分享吗？ - Brian Hogan

这个网站是Forumwarz.com；它是一个讽刺互联网的网络游戏。因此，我们有数百种不同风格的虚假网站供人们参观 :)我们有一个博客，但它与开发无关，只涉及游戏 :) - Evil Trout

5

TL;DR - 尽管广受欢迎，但我不太喜欢使用HAML或SASS，而我喜欢SCSS。

似乎大多数人都强烈支持HAML，但就我个人而言，我并不喜欢它。

如果我的意图是生成HTML，则我更喜欢模板语言尽可能接近HTML。这避免了必须学习另一层间接性的需要，从而增加了混淆和错误的机会，并产生了认知负担。

我发现HAML对我所偏爱的用于可读性和换行的空格的限制往往令人烦恼，并且经常导致语法难以阅读。

最近，在HAML模板中遇到了一个微妙的错误，如果该模板是ERB，则将立即显而易见：

 .table
   .thead
   .tr
   .tr

表格行不应该放在THEAD标签内，这在HAML中虽然是有效的，但与预期的HTML结构不符。尽管页面似乎渲染正常，但一个CSS选择器失败了，导致一些Javascript代码默默失败。

我相信大多数HAML用户会很明显地发现这种错误，但在更大的模板上下文中，可能很难发现；特别是对于刚开始使用HAML的开发人员。

另一方面，如果使用ERB或HTML：

 <table>
   <thead>
   <tr>...</tr>
   <tr>...</tr>

在我的观点中，由于ERB和HTML几乎总是缩进的方式，结构错误更容易被发现。

我已经花费将近20年时间来编写HTML了，我必须承认我对编写格式良好的HTML有一定的自豪感，我没有理由去学习一种不同的表示方法，并学习所有新的视觉模式来发现错误。

另一方面，我非常喜欢SCSS（而不是SASS），因为SCSS本质上是CSS的超集。它不会添加完全新的间接层，这需要我进行心理翻译。它只会添加一种适度的语法变化，提供了一种更简明（且DRY）的CSS表示形式，我发现很容易阅读和理解。

实际上，我更喜欢不使用任何强制规定我应该如何缩进或换行代码的语言，例如Python。或者像Coffeescript这样仅作为底层语言的间接层的语言。

我并不是说我认为在编程语言中抽象和间接层是不好的；只是相对于这里讨论的特定语言，我更喜欢不使用它们。

- user724498

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian Hogan · Accepted Answer

Haml很好用，我经常使用它，但单单使用Sass就已经非常值得了，特别是在构建复杂样式表时。例如，CSS中最糟糕的问题之一就是在为选择器命名时需要做很多重复性工作。在CSS中，你必须这样做：

#navbar ul 
#navbar ul li a
#navbar ul li a:hover

使用Sass，您可以自然地嵌套这些后代元素。

#navbar

  ul
    margin: 0
    padding: 0
    list-style: none
    width: 100%

    li
      margin: 0
      float: left
      margin-right: 10px
      border: 1px solid #000

      a
        text-decoration: none

        &:hover
          color: red

您还可以使用变量

!border_color = #333

.box
  border = 1px "solid" !border_color

而且您可以使用它们进行数学运算

!measure = 18px
!text_size = !measure / 1.5

body
  font-size = !text_size
  line-height = !measure

h1
  font-size = !measure
  margin-bottom = !measure

h2
  font-size = !measure + 2

#wrapper
  width = !measure * 50

你也可以分享代码

=rounded
  -moz-border-radius: 4px
  -webkit-border-radius: 4px
  border-radius: 4px
  border: 1px solid #000

.box
 +rounded

这个工具非常强大，你有必要学习它。同时，最终结果是普通的CSS，可以进行转换。

不要忘记css2sass，它可以将你现有的CSS转换为Sass文件！

如果想要的话，你可以在http://rendera.heroku.com/上尝试一些示例。这是我建立的一个网站，帮助人们学习HTML5和CSS3，并支持HAML和SASS。

还要看看StaticMatic(staticmatic.rubyforge.org)，它是一个使用HAML和SASS进行静态网站制作的神奇工具。它会生成可以上传到静态主机的网站，并拥有类似Ruby on Rails的布局和模板系统。

回答你提出的问题，“值得吗”，答案是肯定的。能够使用变量、轻松地按选择器分组以及通过模块共享代码可以使复杂的样式表更容易维护。构建样式表并不需要很长时间，而且你可以使用优秀的Compass框架进一步扩展功能。例如，你可以将960.gs或Blueprint模块混合到现有的样式表中，这样就不必改变代码的标记。将所有标记添加960.gs及其“grid_12”和“container_12”类可能是不可能的，但使用Compass和Sass却非常容易。

Sass还可以更轻松地为开发模式拥有多个样式表，并生成单个样式表用于生产，从而提高客户端性能（在页面加载时减少对服务器的调用）。

HAML也有其自身的优点，虽然它们不像Sass那么明显。HAML确实使嵌套元素和声明DIV变得非常容易...例如，使用普通的960.gs就很容易与HAML配合使用：

#header.container_12
  .grid_12
     %h1 Welcome!
#middle.container_12
  .grid_8
     %h2 Main content
  .grid_4
     %h3 Sidebar

输入工作量大大减少。如果你决定出于某种原因在所有这些内容周围添加一个包装器，只需将整个内容缩进到一个新标签下即可。

希望这有所帮助。我 <3 Sass。