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

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

Haml Sass Compass

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

andrey_sitnikaievilmartianscomsitnikru

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

1996HTML CSS

2011HTML CSS

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

Скачайте пример

evilmartiansrurit2011

Haml mdash язык шаблоновс альтернативным синтаксисом

для HTML или XML

Веб-сервер

Браузер

Шаблон на

Haml

HTML

Поддержка Haml

PHP ASPNet Java

Ruby on Rails Perl Python

5html( lang=ru ) body content h1big Заголовок

ltDOCTYPE htmlgtlthtml lang=rugt ltbodygt ltdiv id=contentgt lth1 class=biggt Заголовок lth1gt ltbodygtlthtmlgt

Мистерия 1

Sass mdash препроцессор CSS

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

Начало работыcompass create

Создаёт файлнастроек с путями сsass- и css-файлам

Разработкаcompass watch

Следит за изменениемsass-файлов и тут жеобновляет css-файлы

Деплойcompass compile

Компилируетsass-файлы в CSSчтобы отдаватьпользователям ужеготовые css-файлы

$width 100pxmixin default-font($size = 12px) font $size serifcontent width $width + 10px h1 include default-font(40px)

content width 110px content h1 font 40px serif

Мистерия 2

import compasscss3input 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

CSS3

Мистерия 3

import compasscss3

$experimental-support-for-svg true

header include background(linear-gradient(red blue)) include filter-gradient(gray black)

Градиенты

Мистерия 4

background inline-image(iconpng) no-repeat

background url(dataimagepngbase64iVBORw0KGhellip) no-repeat

datauri

Спрайты

$sprite sprite-map(dirpng) dironepng dirtwopng one background sprite($sprite one) two background sprite($sprite two)

one background url(dir-2f78eapng) 0 0

one background url(dir-2f78eapng) 0 -20px

Мистерия 5

Ещё в SASS

bull Генерация изображений с шумомgistgithubcom856571

bull Изменение изображений через ImageMagickgithubcomStanAngeloffcompass-magick

Ссылки

HamlCompass

haml-langcomcompass-styleorg

Вопросы

aievilmartianscomevilmatiansru

Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27

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

andrey_sitnikaievilmartianscomsitnikru


1996HTML CSS

2011HTML CSS






Веб-сервер

Браузер

Шаблон на

Haml

HTML


PHP ASPNet Java




Мистерия 1











Мистерия 2



CSS3

Мистерия 3

import compasscss3



Градиенты

Мистерия 4



datauri

Спрайты




Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27


1996HTML CSS

2011HTML CSS






Веб-сервер

Браузер

Шаблон на

Haml

HTML


PHP ASPNet Java




Мистерия 1











Мистерия 2



CSS3

Мистерия 3

import compasscss3



Градиенты

Мистерия 4



datauri

Спрайты




Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27






Веб-сервер

Браузер

Шаблон на

Haml

HTML


PHP ASPNet Java




Мистерия 1











Мистерия 2



CSS3

Мистерия 3

import compasscss3



Градиенты

Мистерия 4



datauri

Спрайты




Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27


PHP ASPNet Java




Мистерия 1











Мистерия 2



CSS3

Мистерия 3

import compasscss3



Градиенты

Мистерия 4



datauri

Спрайты




Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27



Мистерия 1











Мистерия 2



CSS3

Мистерия 3

import compasscss3



Градиенты

Мистерия 4



datauri

Спрайты




Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27











Мистерия 2



CSS3

Мистерия 3

import compasscss3



Градиенты

Мистерия 4



datauri

Спрайты




Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27



CSS3

Мистерия 3

import compasscss3



Градиенты

Мистерия 4



datauri

Спрайты




Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27

Мистерия 3

import compasscss3



Градиенты

Мистерия 4



datauri

Спрайты




Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27

import compasscss3



Градиенты

Мистерия 4



datauri

Спрайты




Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27

Мистерия 4



datauri

Спрайты




Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27



datauri

Спрайты




Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27

Спрайты




Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27

Мистерия 5

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27

Ещё в SASS



Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27

Ссылки

HamlCompass


Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27

Вопросы


Страница 1

Страница 2

Страница 3

Страница 4

Страница 5

Страница 6

Страница 7

Страница 8

Страница 9

Страница 10

Страница 11

Страница 12

Страница 13

Страница 14

Страница 15

Страница 16

Страница 17

Страница 18

Страница 19

Страница 20

Страница 21

Страница 22

Страница 23

Страница 24

Страница 25

Страница 26

Страница 27

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

Technology

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