haml - html和sass值得学吗？

Question

根据您的职业经验，haml 和 sass 被证明是有用的吗？通过什么方式？

Answer 1

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 确实使嵌套元素和声明 DIVS 变得异常简单...例如，使用 HAML 甚至使用常规 960.gs 也很容易:

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

打字少得多。如果您决定出于某种原因需要为所有这些内容添加包装器，只需将整个内容缩进新标签下方即可。

希望有帮助。我<3 Sass。