Стоит ли переходить с erb на haml?

Здравствуй, Хабр!

Собственно, сразу к делу: стоит ли переезжать с erb на haml, если планируется использование sass?

P.S. википедия говорит, что HAML - язык разметки для упрощённой генерации XHTML. O_O а как же html5?
  • Вопрос задан
  • 2986 просмотров
Решения вопроса 1
kirillplatonov
@kirillplatonov
Ruby on Rails developer
А при чем тут sass? HAML для html, sass для css.
haml.info/docs/yardoc/file.REFERENCE.html

Про википедию
HAML компилируется в HTML.


Переезжать стоит. Количество кода сокращается в 1.5-2 раза. Также рекомендую присмотреться к slim-lang.com
Я не пробовал, но выглядит весьма вкусно
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Piranis
@Piranis
стоит вот мой application layout
в haml:
!!!
/[if lt IE 7] <html class="no-js lt-ie9 lt-ie8 lt-ie7">
/[if IE 7] <html class="no-js lt-ie9 lt-ie8">
/[if IE 8] <html class="no-js lt-ie9">
/ [if gt IE 8]><!
%html.no-js
  / <![endif]
  %head
    %meta{charset: "utf-8"}/
    %meta{content: "IE=edge", "http-equiv" => "X-UA-Compatible"}/
    %title
    %meta{content: "", name: "description"}/
    %meta{content: "width=device-width, initial-scale=1", name: "viewport"}/
    / Place favicon.ico and apple-touch-icon.png in the root directory
    %link{href: "css/normalize.css", rel: "stylesheet"}/
    %link{href: "css/main.css", rel: "stylesheet"}/
    %script{src: "js/vendor/modernizr-2.6.2.min.js"}
    = stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true
    = csrf_meta_tags
  %body
    /[if lt IE 7]
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    %header
      .container
        //= image_tag 'vector-logo-v2.png',{id:"logo"} //temporrary use html logo
        #logo
          = image_tag('logo_55h.png')
        %nav#mainmenu
          %li{class: current_page?(root_path)  && 'active' }
            = link_to_unless_current 'Главная', root_path
          %li{class: current_page?(projects_path)  && 'active' }
            = link_to_unless_current 'Проекты', projects_path
          %li{class: current_page?(contacts_path) && 'active' }
            = link_to_unless_current 'Контакты', '/contacts'
        .clearfix
    %section.container
      #content
        = yield

    %script{src: "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"}
    :javascript
      window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')
    %script{src: "js/plugins.js"}
    %script{src: "js/main.js"}
    / Google Analytics: change UA-XXXXX-X to be your site's ID.
    :javascript
      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
      e.src='//www.google-analytics.com/analytics.js';
      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
      ga('create','UA-XXXXX-X');ga('send','pageview');
    = javascript_include_tag "application", "data-turbolinks-track" => true

вот html
<html class="no-js"><!-- <![endif] --><head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title></title>
    <meta content="" name="description">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link href="css/normalize.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="//www.google-analytics.com/analytics.js"></script><script src="js/vendor/modernizr-2.6.2.min.js"></script><style type="text/css"></style>
    <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet">
    <link data-turbolinks-track="true" href="/assets/contacts.css?body=1" media="all" rel="stylesheet">
    <link data-turbolinks-track="true" href="/assets/prices.css?body=1" media="all" rel="stylesheet">
    <link data-turbolinks-track="true" href="/assets/projects.css?body=1" media="all" rel="stylesheet">
    <link data-turbolinks-track="true" href="/assets/welcome.css?body=1" media="all" rel="stylesheet">
    <meta content="authenticity_token" name="csrf-param">
    <meta content="Sb2aE4hpkVwYNa7Jw01SjnY8rlYN7QPRoKX/x0+ezY8=" name="csrf-token">
  </head>
  <body style="">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <header>
      <div class="container">
        <!-- /= image_tag 'vector-logo-v2.png',{id:"logo"} //temporrary use html logo -->
        <div id="logo">
          <img alt="Logo 55h" src="/assets/logo_55h.png">
        </div>
        <nav id="mainmenu">
          <li class="active">
            Главная
          </li>
          <li>
            <a href="/projects">Проекты</a>
          </li>
          <li>
            <a href="/contacts">Контакты</a>
          </li>
        </nav>
        <div class="clearfix"></div>
      </div>
    </header>
    <section class="container">
      <div id="content">
        <h1>Welcome#index</h1>
        <p>Find me in app/views/welcome/index.html.haml</p>
      </div>
    </section>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')
    </script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
      e.src='//www.google-analytics.com/analytics.js';
      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
      ga('create','UA-XXXXX-X');ga('send','pageview');
    </script>
    <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/contacts.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/prices.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/projects.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/welcome.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
 </body>
</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы