发布sublime text 2的一枚haml编译插件 (win)

先看几个例子吧

haml：

!!! XML
!!! strict
%html{ xmlns: "http://www.w3.org/1999/xhtml" }
  %head
    %title Sample haml template
  %body
    - var title = "hello haml!";
    #home= title
      %ul.menu
        %li Go Home
        %li Go Back

html：

<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <title>
            Sample haml template
        </title>
    </head>
    
    <body>
        <div id="home">
            hello haml!
            <ul class="menu">
                <li>
                    Go Home
                </li>
                <li>
                    Go Back
                </li>
            </ul>
        </div>
    </body>

</html>

 

haml：（js）

- var length = 10,height = 9;
- var area = 0.5 * length * height
.area= area

html：

<div class="area">
    45
</div>

 

haml：（模板）

- var obj = {
    area: 0.5 * 1.4 * 9,
    r: 200 / 12
  }
.triangle-details Area is: #{obj.area} and the ratio is: #{obj.r}

html：

<div class="triangle-details">
    Area is: 6.3 and the ratio is: 16.666666666666668
</div>

 

haml：（定义方法）

- function b(item){
.item
  %b= item
  %span.length= item.length
- }
- b("Hi")
- b("World")

html：

<div class="item">
    <b>
        Hi
    </b>
    <span class="length">
        2
    </span>
</div>
<div class="item">
    <b>
        World
    </b>
    <span class="length">
        5
    </span>
</div>

 

haml：(遍历)

- var data = [
    {
      age:91,
      name:"haml",
      value:"521"
    },
    {
      age:110,
      name:"html",
      value:12
    }
  ];

:each item in data
  :if item.age < 100
    %dl
      :each name, value in item
        %dt= name
        %dd= value

html：

<dl>
    <dt>
        age
    </dt>
    <dd>
        91
    </dd>
    <dt>
        name
    </dt>
    <dd>
        haml
    </dd>
    <dt>
        value
    </dt>
    <dd>
        521
    </dd>
</dl>

 

haml： （内嵌js、css）

%head
  :javascript
    function greet(message) {
      alert("Message from MCP: " + message);
    }
  %title Script and Css test
  :css
    body {
      color: pink;
    }
%body{ onload: "greet(\"I'm Pink\")" } COLOR ME PINK

html：

<head>
    <script type="text/javascript">
    //<![CDATA[

function greet(message) {

    alert("Message from MCP: " + message);

}

//]]>
    </script>
    <title>
        Script and Css test
    </title>
    <style type="text/css">
        body { color: pink; }
    </style>
</head>
<body onload="greet(&quot;I'm Pink&quot;)">
    COLOR ME PINK
</body>

 

 

download github

插件代码主要来自于项目haml-js

 

 

另：less插件

posted @ 2012-07-02 23:25  tangoboy  阅读(637)  评论(0)  编辑  收藏  举报