More Related Content Similar to Ускорение frontend-разработки с помощью Haml, Sass, Compass Similar to Ускорение frontend-разработки с помощью Haml, Sass, Compass (20) More from Andrey Sitnik (6) 4. 1996 2011
HTML, CSS HTML, CSS
5. Мистерия
о том, как Haml, Sass и Compass
помогают нам верстать
на реальном примере с groupon.ru
8. Haml — язык шаблонов
с альтернативным синтаксисом
для HTML или XML
11. !!! 5 <!DOCTYPE html>
%html( lang="ru" ) <html lang="ru">
%body <body>
#content <div id="content">
%h1.big <h1 class="big">
Заголовок Заголовок
</h1>
</body>
</html>
15. Начало работы Разработка Деплой
compass create compass watch compass compile
Создаёт файл Следит за изменением Компилирует
настроек с путями с sass-файлов и тут же sass-файлы в CSS,
sass- и css-файлам обновляет css-файлы чтобы отдавать
пользователям уже
готовые css-файлы
16. $width: 100px;
@mixin default-font($size = 12px) {
font: $size serif;
}
#content {
#content {
width: 110px;
width: $width + 10px;
}
h1 {
#content h1 {
@include default-font(40px);
font: 40px serif;
}
}
}
18. @import 'compass/css3'
input {
CSS3
@include box-shadow(5px); }
input {
box-shadow: black 0 0 5px;
-webkit-box-shadow: black 0 0 5px;
-moz-box-shadow: black 0 0 5px;
-o-box-shadow: black 0 0 5px; }
23. Спрайты
$sprite: sprite-map('dir/*.png'); /* dir/one.png, dir/two.png */
.one { background: sprite($sprite, one); }
.two { background: sprite($sprite, two); }
.one { background: url('dir-2f78ea.png') 0 0; }
.one { background: url('dir-2f78ea.png') 0 -20px; }
25. Ещё в SASS
• Генерация изображений с шумом
gist.github.com/856571
• Изменение изображений через
ImageMagick
github.com/StanAngeloff/compass-magick
26. Ссылки
Haml haml-lang.com
Compass compass-style.org
