ускорение Front end разработки с помощью haml, sass и compass. андрей ситник. зал 4

•

0 likes•551 views

rit2011

Ускорение frontend-разработки с помощью
Haml, Sass, Compass

Андрей Ситник

@andrey_sitnik
ai@evilmartians.com
sitnik.ru

Мистерия
о том, как Haml, Sass и Compass
помогают нам верстать
на реальном примере с groupon.ru

Haml — язык шаблонов
с альтернативным синтаксисом
для HTML или XML

Шаблон на
Веб-сервер Haml

HTML

Браузер

Поддержка Haml

PHP, ASP.Net, Java,
Ruby on Rails, Perl, Python

!!! 5 <!DOCTYPE html>
%html( lang="ru" ) <html lang="ru">
%body <body>
#content <div id="content">
%h1.big <h1 class="big">
Заголовок Заголовок
</h1>
</body>
</html>

Compass — набор кошерных инструментов и
шаблонов для Sass

Начало работы Разработка Деплой
compass create compass watch compass compile
Создаёт файл Следит за изменением Компилирует
настроек с путями с sass-файлов и тут же sass-файлы в CSS,
sass- и css-файлам обновляет css-файлы чтобы отдавать
пользователям уже
готовые css-файлы

$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;
}
}
}

@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; }

Градиенты
@import 'compass/css3';

$experimental-support-for-svg: true;

header {
@include background(linear-gradient(red, blue));
@include filter-gradient(gray, black);
}

data:uri
background: inline-image('icon.png') no-repeat;

background: url('data:image/png;base64,iVBORw0KG…')
no-repeat;

Спрайты
$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; }

Ещё в SASS
• Генерация изображений с шумом
gist.github.com/856571
• Изменение изображений через
ImageMagick
github.com/StanAngeloff/compass-magick

Ссылки

Haml haml-lang.com
Compass compass-style.org

Вопросы?

ai@evilmartians.com
evilmatians.ru

Авторы: Побрцева Елена, Ольшанский Гоша, Мельник Полина, Шатало Ярослава, Балуев Никита, Макеев Максим, Мошкин Сергей, ученики 2-А класса МБОУ СОШ №4 городского округа Стрежевой с углубленным изучением отдельных предметов

Dia 3lchonillom

Reference from Andrew KrenekHelena Paulikova

MG Magrini promo 03-2012Utensileria Modenese srl

Презентация подготовлена по материалам выступления Юрия Бондаренко на витебском MiniQ#14, который был проведен 25 апреля 2019: https://vk.com/miniq14; https://communities.by/events/miniq-vitebsk-14. Про доклад: В докладе я расскажу о том, как писать стили на чистом "ванильном" CSS. Мы рассмотрим возникающие перед вертальщиком практические задачи и способы их решения.

Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда

7bits

Артем Маркушев - HTML & CSSDataArt

SASS & LESS

Raman Budny

Canvas

Oleksandr Milkovskyi

Web весна 2013 лекция 10Technopark

Парсим CSS

Roman Dvornov

Я занимаюсь CSSO. В ходе работы над ним мне пришлось погрузиться в процесс парсинга CSS. В результате парсер (тот, что в CSSO) был не раз переписан. Пришло время сделать его отдельным инструментом. Новый быстрый детальный парсер CSS, его AST, области применения и кое-что ещё.

CSS глазами машин

Roman Dvornov

Большинство считает CSS чем-то простым и не заслуживающим внимания. Но за мнимой простотой кроется большая сложность и огромный пласт проблем, не имеющих пока решения. Современный CSS с его объёмами, новыми фичами, разной поддержкой и багами браузеров, уже почти не поддается анализу человеком. Для этого появляются программы, которые разбирают CSS на атомы, анализируют и помогают сделать его лучше. Как к этому прийти, где мы сейчас и что ещё предстоит сделать.

Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)

Ontico

Массовая имплементация пользовательских свойств CSS в большинстве популярных браузеров открыла простор для творчества и экспериментов над архитектурой CSS-кода, недостижимой ранее. - Всесильны ли препроцессоры? - Можно ли дать CSS второй шанс? - Наследуемость или БЭМ? - А что с обратной совместимостью? Решение есть! В рамках доклада будут детально рассмотрены практические примеры применения CSS Custom Properties. Также будут рассмотрены новые спецификации CSS Extensions (Сustom selectors) и CSS @apply Rule в рамках перспективы отказа от препроцессоров.

пользовательские свойства как основа архитектуры CSS

Zigzag_McQuack

Web осень 2012 лекция 10Technopark

Семинар-практикум по Drupal

it-people

LESS and even more. Anton Shubkin.ADCI Solutions

010 презентация less и адаптивный дизайн

sivorka

Front-end разработка. CompassDrupalSib

Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)

Ontico

РИТ++ 2017, Frontend Сonf Зал Дели + Калькутта, 5 июня, 11:00 Тезисы: http://frontendconf.ru/2017/abstracts/2514.html Нам постоянно нужно от CSS больше того, что в нём (или браузерах) есть прямо сейчас. История, рассказывающая о том, какими способами мы решали(ем) проблемы недостающих нам возможностей (css frameworks, css polyfills, preproccessors, “post”-proccessors) и о Houdini, который должен положить конец этой ерунде, позволив описывать разработчикам с помощью JavaScript не просто полифилы, а полноценные реализации, не мешающие производительности. Расскажу о том, что мы можем контролировать в CSS сейчас, что сможем с Houdini, и что в нем есть на текущий момент с примерами демок.

6) css background

Boian Ivanov

Роман Комаров "CSS-препроцессоры: из каменного века — в будущее"

Yandex

Илья Андриенко: Вёрстка в проекте глазами “неверстальщика”

Oleg Poludnenko

Доклад с PUG#1 https://www.facebook.com/events/1505404039679797/ В первой части своей презентации я рассказал о CSS-препроцессорах, и, на примере препроцессора LESS, о четёрёх основных их возможностях, которые могут заинтересовать и backend-разработчика. Вторая часть была посвящена разбору проблемной ситуации, когда в условиях нехватки времени у backend-разработчика возникает необходимость вносить мелкие правки в вёрстку, а разработчик не готов пользоваться и настраивать препроцессор, в следствие чего драгоценное время тратится на организационные вопросы. Рассмотрены основные причины этой неготовности и простые средства их решения. PHP User Group Ukraine в социальных сетях: https://www.facebook.com/pug.ukraine https://vk.com/pug.ukraine https://www.linkedin.com/groups/PHP-User-Group-Ukraine-6703717

классификация Ddos. александр лямин, артем гавриченков. зал 2rit2011

Chef. кто на кухне хозяин. концепция devops. а,титов. зал 2rit2011

Similar to ускорение Front end разработки с помощью haml, sass и compass. андрей ситник. зал 4

Web весна 2012 лекция 10Technopark

CSS. Практика

Vitebsk Miniq

Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда

7bits

Артем Маркушев - HTML & CSSDataArt

SASS & LESS

Raman Budny

Canvas

Oleksandr Milkovskyi

Web весна 2013 лекция 10Technopark

Парсим CSS

Roman Dvornov

CSS глазами машин

Roman Dvornov

Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)

Ontico

пользовательские свойства как основа архитектуры CSS

Zigzag_McQuack

Web осень 2012 лекция 10Technopark

Семинар-практикум по Drupal

it-people

LESS and even more. Anton Shubkin.ADCI Solutions

010 презентация less и адаптивный дизайн

sivorka

Front-end разработка. CompassDrupalSib

Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)

Ontico

6) css background

Boian Ivanov

Роман Комаров "CSS-препроцессоры: из каменного века — в будущее"

Yandex

Илья Андриенко: Вёрстка в проекте глазами “неверстальщика”

Oleg Poludnenko

Similar to ускорение Front end разработки с помощью haml, sass и compass. андрей ситник. зал 4 (20)

Web весна 2012 лекция 10

CSS. Практика

Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда

Артем Маркушев - HTML & CSS

SASS & LESS

Canvas

Web весна 2013 лекция 10

Парсим CSS

CSS глазами машин

Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)

пользовательские свойства как основа архитектуры CSS

Web осень 2012 лекция 10

Семинар-практикум по Drupal

LESS and even more. Anton Shubkin.

010 презентация less и адаптивный дизайн

Front-end разработка. Compass

Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)

6) css background

Роман Комаров "CSS-препроцессоры: из каменного века — в будущее"

Илья Андриенко: Вёрстка в проекте глазами “неверстальщика”

More from rit2011

классификация Ddos. александр лямин, артем гавриченков. зал 2rit2011

Chef. кто на кухне хозяин. концепция devops. а,титов. зал 2rit2011

как объяснить заказчику, что он не прав. денис тучин. зал 3rit2011

классификация Ddos. александр лямин, артем гавриченков. зал 2rit2011

Kpi разработчика vs kpi разработки. евгения фирсова. зал 1rit2011

ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....rit2011

что и почему вы должны программировать на Erlang.максим лапшин. зал 4rit2011

I pv6 малоизвестные подробности. андрей пантюхин. зал 2rit2011

безопасность веб приложений сегодня. дмитрий евтеев. зал 4rit2011

как стать хорошим веб технологом. нарек мкртчян. зал 4rit2011

сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...rit2011

выращиваем интерфейс своими руками. ольга павлова. зал 3rit2011

распределенное файловое хранилище (Nginx, zfs, perl). перепелица мамонтов. зал 2rit2011

от Flash к html5. александр бацуев. зал 4rit2011

Ie9 и ie10. алекс могилевский. зал 2rit2011

сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...rit2011

полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...rit2011

рисуем тз. эффективный способ коммуникации в веб проектах. артем вольфтруб. з...rit2011

типология личности и прогноз отношений по а. афанасьеву. сергей котырев. зал 2rit2011

круглый стол по найму. александр зиза. зал 2rit2011

More from rit2011 (20)

классификация Ddos. александр лямин, артем гавриченков. зал 2

Chef. кто на кухне хозяин. концепция devops. а,титов. зал 2

как объяснить заказчику, что он не прав. денис тучин. зал 3

классификация Ddos. александр лямин, артем гавриченков. зал 2

Kpi разработчика vs kpi разработки. евгения фирсова. зал 1

ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....

что и почему вы должны программировать на Erlang.максим лапшин. зал 4

I pv6 малоизвестные подробности. андрей пантюхин. зал 2

безопасность веб приложений сегодня. дмитрий евтеев. зал 4

как стать хорошим веб технологом. нарек мкртчян. зал 4

сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...

выращиваем интерфейс своими руками. ольга павлова. зал 3

распределенное файловое хранилище (Nginx, zfs, perl). перепелица мамонтов. зал 2

от Flash к html5. александр бацуев. зал 4

Ie9 и ie10. алекс могилевский. зал 2

сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...

полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...

рисуем тз. эффективный способ коммуникации в веб проектах. артем вольфтруб. з...

типология личности и прогноз отношений по а. афанасьеву. сергей котырев. зал 2

круглый стол по найму. александр зиза. зал 2

ускорение Front end разработки с помощью haml, sass и compass. андрей ситник. зал 4

1. Ускорение frontend-разработки с помощью Haml, Sass, Compass

2. Андрей Ситник @andrey_sitnik ai@evilmartians.com sitnik.ru

3. Лень, нетерпимость и гордыня

4. 1996 2011 HTML, CSS HTML, CSS

5. Мистерия о том, как Haml, Sass и Compass помогают нам верстать на реальном примере с groupon.ru

7. Скачайте пример evilmartians.ru/rit2011

8. Haml — язык шаблонов с альтернативным синтаксисом для HTML или XML

9. Шаблон на Веб-сервер Haml HTML Браузер

10. Поддержка Haml PHP, ASP.Net, Java, Ruby on Rails, Perl, Python

11. !!! 5 <!DOCTYPE html> %html( lang="ru" ) <html lang="ru"> %body <body> #content <div id="content"> %h1.big <h1 class="big"> Заголовок Заголовок </h1> </body> </html>

12. Мистерия 1

13. Sass — препроцессор CSS

14. Compass — набор кошерных инструментов и шаблонов для Sass

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; } } }

17. Мистерия 2

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; }

19. Мистерия 3

20. Градиенты @import 'compass/css3'; $experimental-support-for-svg: true; header { @include background(linear-gradient(red, blue)); @include filter-gradient(gray, black); }

21. Мистерия 4

22. data:uri background: inline-image('icon.png') no-repeat; background: url('data:image/png;base64,iVBORw0KG…') no-repeat;

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; }

24. Мистерия 5

25. Ещё в SASS • Генерация изображений с шумом gist.github.com/856571 • Изменение изображений через ImageMagick github.com/StanAngeloff/compass-magick

26. Ссылки Haml haml-lang.com Compass compass-style.org

27. Вопросы? ai@evilmartians.com evilmatians.ru

ускорение Front end разработки с помощью haml, sass и compass. андрей ситник. зал 4

Recommended

Recommended

More Related Content

Similar to ускорение Front end разработки с помощью haml, sass и compass. андрей ситник. зал 4

Similar to ускорение Front end разработки с помощью haml, sass и compass. андрей ситник. зал 4 (20)

More from rit2011

More from rit2011 (20)

ускорение Front end разработки с помощью haml, sass и compass. андрей ситник. зал 4