Документ описывает CSS-препроцессоры, такие как Less, Sass и Stylus, выделяя их основные возможности, включая работу с переменными, миксинами и вложенными селекторами. Автор обсуждает различия между ними и приводит примеры практического применения в разработке интерфейсов. Также упоминаются полезные библиотеки и инструменты для работы с препроцессорами.

1. CSS-препроцессоры:
из каменного века —
в будущее
Роман Комаров
Разработчик интерфейсов
Я.Субботник, Санкт-Петербург, 30 июня 2012 года

2. Зачем?
2

3. Простой CSS — каменный век
2

4. HTML CSS2.1 CSS3 CSS4
4

5. 5 CSS-препроцессоры!

6. CSS-препроцессоры
— Less
— Sass
— Stylus
И ещё много разных: CSS Crush,
Closure Stylesheets, …
6

7. Основные возможности
— Раскрытие импортов
— Переменные
— Вычисления
— Условия, циклы и всё такое
— Миксины
— Работа с цветом
— Вложенные селекторы
7

8. Различия и грабли
8

9. Миксины
— Less: .border-radius(10px);
— Scss: @include border-radius(10px);
— Sass: +border-radius(10px);
— Stylus: border-radius:10px;;
или border-radius(10px);
или border-radius 10px;;
9

10. Склеивание селекторов
В Less и Stylus всё ок, можно делать БЭМ:
.block { .block {
height: 10px; height: 10px;
}
&__element {
width: 10px;
→ .block__element {
width: 10px;
} }
}
10

11. Склеивание селекторов
В Sass появляется пробел :(
.block { .block {
height: 10px; height: 10px;
}
&__element {
width: 10px;
→ .block __element {
width: 10px;
} }
}
11

12. Склеивание селекторов
Не злоупотребляйте вложенностью
.block
&__element
&.block2
.foo &
&:hover
"
.foo .block__element.block2:hover
12

13. Практическое применение
— Генерация палитр цветов
— Автоматический вертикальный ритм
— Автоматическая подстановка префиксов
13

14. Подстановка префиксов
transition: transform 1s, width 2s linear;
"
-webkit-transition: -webkit-transform 1s, width 2s linear;
-moz-transition: -moz-transform 1s, width 2s linear;
-o-transition: -o-transform 1s, width 2s linear;
transition: transform 1s, width 2s linear;
14

15. Библиотеки
— Compass для Sass
— nib для Stylus
— Elements для Less
15

16. Инструменты
— Вотчеры
— LiveReload
— CodeKit
16

17. Полезные
ссылки
http://clck.ru/1DOv8
17

18. Роман Комаров
Разработчик интерфейсов
kizu@yandex-team.ru
@ki_zu