haml, sass и все такое

int03e · August 30, 2011

Привет всем верстальщикам :-) С версткой у меня мягко говоря не очень, в основном бекенд, поэтому хочется немного подтянуть эту область. В связи с этим возник один вопрос - использует ли кто-то такие штуки как HAML, SASS, как кто вообще относится к синтаксическому сахару? Лично мне все это удобней, чем писать на html+css но... хотелось бы услышать мнение верстальщиков.

И еще - шаблоны, например Boilerplate - тру или сакс? Хочется использовать html5 (мне он кажется более правильным, плюс есть нужные мне фичи), но напряжно заморачиваться с совместимостью со всеми браузерами. Я на ложном пути?

Всем спасибо

Vlad · August 30, 2011

Была уже тема про Boilerplate.

http://forum.htmlbook.ru/index.php?showtopic=24799

int03e · August 30, 2011

Была уже тема про Boilerplate.
http://forum.htmlbook.ru/index.php?showtopic=24799

Не нашел, каюсь... но в принципе уже решил его использовать, больше интересует первый вопрос :-) Не думаю, что абсолютно все тут пишут на чистом html/css в notepad++ :-)

Vlad · August 30, 2011

В CodeIgniter использую хелперы для вставки кода. Поначалу ворочал нос, типа несолидно это, потом втянулся и понравилось.

int03e · August 30, 2011

В CodeIgniter использую хелперы для вставки кода. Поначалу ворочал нос, типа несолидно это, потом втянулся и понравилось.

Не знаком с php фреймворками но основную мысль понял, спасибо

Vlad · August 30, 2011

Принцип тот же у хелперов.

Вместо

echo form_input(array('name' => 'username', 'id' => 'username', 'value' => 'Александр', 'maxlength' => '100', 'size' => '50', 'style' => 'width:50%'));

получается

int03e · August 30, 2011

Принцип тот же у хелперов.
Вместо
echo form_input(array('name' => 'username', 'id' => 'username', 'value' => 'Александр', 'maxlength' => '100', 'size' => '50', 'style' => 'width:50%'));
получается
<input type="text" name="username" id="username" value="Александр" maxlength="100" size="50" style="width:50%" />

А, понял о чем вы, высыпаться надо)) В рельсах похоже:


<%= form_for @person do |f| %>
  <%= f.label :first_name %>:
  <%= f.text_field :first_name %><br />
  <%= f.submit %>
<% end %>

преобразуется в


<form action="/people" class="new_person" id="new_person" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="authenticity_token" type="hidden" value="NrOp5bsjoLRuK8IW5+dQEYjKGUJDe7TQoZVvq95Wteg=" />
  </div>
  <label for="person_first_name">First name</label>:
  <input id="person_first_name" name="person[first_name]" size="30" type="text" /><br />

  <input id="person_submit" name="commit" type="submit" value="Create Person" />
</form>

Это все клево, и конечно используется. В вопросе я имел ввиду скорее это (haml):


#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

Преобразуется в


<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>

И это (sass):


table.hl
  margin: 2em 0
  td.ln
    text-align: right

li
  font:
    family: serif
    weight: bold
    size: 1.2em

Преобразуется в


/* CSS */
table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

При таком подходе код выглядит красивее и его меньше, основное беспокойство для меня - поймут ли потенциальные будущие верстальщики, которые этот код править будут, что например "!!!" это "<!doctype html>", это проще для кодеров, но не факт что для вас...

Edited August 30, 2011 by int03e

Vlad · August 30, 2011

Как-то верстал на хамле для сайта на Руби. Врубился за день, а через пару дней уже верстал, но поначалу да, задавал вопросы, что это за фигня.

int03e · August 30, 2011

С позиции профи по верстке - хамл удобней? Почему не возникло потом желание его использовать? Ведь насколько я знаю, с php подружить не сложно, не руби единым.

Vlad · August 30, 2011

Такие вещи используются на готовом проекте, если же под заказ вёрстка делается, то смысла нет, кто его знает, как оно там дальше будет.

int03e · August 30, 2011

Такие вещи используются на готовом проекте, если же под заказ вёрстка делается, то смысла нет, кто его знает, как оно там дальше будет.

Ясно, непопулярно это... Спасибо за мнение. И (оффтопик) за отличную книгу!

sigma77 · August 30, 2011

int03e,

А в сторону Zen Coding не смотрели?

int03e · August 30, 2011

int03e,
А в сторону Zen Coding не смотрели?

Как-то нет, кстати спасибо за ссылку Выглядит прикольно, надо смотреть, но это же немного из другой серии - быстро написали строчку, нажали шорткат - получили html? Клево, но haml это другое - пишем все на нем (да и сохраняем), а потом просто конвертим (автоматически на самом деле конвертится). Кстати, Zen Coding его поддерживает.

sigma77 · August 30, 2011

int03e,
А в сторону Zen Coding не смотрели?
Как-то нет, кстати спасибо за ссылку Выглядит прикольно, надо смотреть, но это же немного из другой серии - быстро написали строчку, нажали шорткат - получили html? Клево, но haml это другое - пишем все на нем (да и сохраняем), а потом просто конвертим (автоматически на самом деле конвертится). Кстати, Zen Coding его поддерживает.

Да, немного из другой. Но принцип похож. Также облегчает и ускоряет написание кода. Просто здесь происходит конвертация сразу, а там, как я понимаю, на стороне сервера.

Great Rash · August 30, 2011

У нас есть желание попробовать на одном из проектов SASS, только пока нет возможности. Как подвернется лёгенький проект опробуем. Пока же не знаю никого кто бы этим делом пользовался.

int03e · August 30, 2011

Сигма, спасибо за наводку. Но ускорение при написании кода - лишь одна сторона медали, код всегда должен быть красивым и проDRYеным (Don't Repeat Yourself). А как это сделать в css, если там в 20 разных местах одна и та же строчка "color: #такойто"? Нужны миксины, переменные...

У нас есть желание попробовать на одном из проектов SASS, только пока нет возможности. Как подвернется лёгенький проект опробуем. Пока же не знаю никого кто бы этим делом пользовался.

Наверное, большиство руби программистов. Остальные либо используют LESS, либо пишут на чистом CSS. Это имхо, конечно.

Edited August 30, 2011 by int03e

Sign In

haml, sass и все такое

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information