Embed Size (px)
DESCRIPTION
Препроцессором сейчас уже никого не удивишь. С их помощью упрощается синтаксис css, добавляются переменные, условия и циклы. Все это хорошо и замечательно, но часто — не достаточно. Препроцессоры не дадут изменить уже существующий css, который вы получаете из внешних источников, не перепишут ссылки на картинки и шрифты при перемещении файлов в новую папку, не отсортируют css-свойства в нужном вам порядке и не удалят из файлов лишние правила. Во всех этих случаях, а также во многих других вам помогут постпроцессоры. В своем докладе я расскажу, что такое постпроцессоры, какие они бывают и чем отличаются друг от друга. Объясню почему использовать их лучше, чем править css вручную и с помощью регулярных выражений, а также приведу примеры их использования в ежедневной работе.
Citation preview
Зачем нужныпостпроцессоры при
живых препроцессорахАлексей Иванов, компания JetStyle
О чем этот доклад
1. Почему чистого css мало для счастливой жизни.
2. Плюсы и минусы препроцессоров.
3. Что такое постпроцессы и чем они хороши.
4. Почему постпроцессоры становятся популярны именно сейчас.
5. Как сделать свой постпроцессор.
Появление CSS
Появление Ruby-программистов
Ruby-программистысмотрят на css-код
Ruby-программисты создают SASS
1. Переменные
2. Вложенные селекторы
3. Простая математика
К SASS добавляются LESS и Stylus
1. Переменные
2. Вложенные селекторы
3. Простая математика
Возможности препроцессоровначинают бурно развиваться
1. Переменные 6. Примеси
2. Вложенные селекторы 7. Функции
3. Простая математика 8. Циклы for
4. Массивы 9. Условные операторы if .. else
5. Наследование селекторов 10. Ссылки на свойства
Наконец-то настал Золотой Век css!
1. Переменные 6. Примеси
2. Вложенные селекторы 7. Функции
3. Простая математика 8. Циклы for
4. Массивы 9. Условные операторы if .. else
5. Наследование селекторов 10. Ссылки на свойства
Наконец-то настал Золотой Век css!…или нет?
1. Переменные 6. Примеси
2. Вложенные селекторы 7. Функции
3. Простая математика 8. Циклы for
4. Массивы 9. Условные операторы if .. else
5. Наследование селекторов 10. Ссылки на свойства
Какие из-за этого возникаютпроблемы?
1. Возможности препроцессоров можно применять только через их
специальный синтаксис.
2. Собственный язык, который браузеры не понимают.
3. Невозможность модификации обычных css-файлов (кроме Stylus’а).
4. Скорость рендеринга.
5. На большинстве проектов используется только маленький процент
возможностей препроцессоров.
Новая надежда!Rework
Ну а сейчас-тоЗолотой Век?
Ну…
Что такое постпроцессор?
Постпроцессор – это библиотека а) принимающая на вход css, б)
преобразующая его тем или иным образом и в) сохраняющая на
диск снова как css.
Примеры постпроцессоров
1. CSSO – минификация css.
2. CSSComb – изменение порядка выбора правил.
3. cssrb – библиотека для замены ссылок на ресурсы в css файлах.
4. Autoprefixer – автоматическое добавление префиксов.
Что изменил Rework?
Появился простой, быстрый и удобный фреймворк для создания
постпроцессоров:
1. Автоматический парсинг и сборка css.
2. Удобный JavaScript API для работы с разобранным кодом.
3. Куча дополнительной информации о коде – номера строк, имена
файлов, типы селекторов.
4. Поддержка карт кода.
.icon {
background: url('a.png')
}
.icon {
background: url('a.png')
}
.webp .icon {
background: url('a .webp ')
}
Пример: grunt-webpcss
Пример кода из доклада PostCSS: будущее после Sass и LESS
.box {
flex-shrink: 0;
flex-basis: 300px;
}
.box {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-flex-basis: 300px;
-ms-flex-preferred-size: 300px;
flex-basis: 300px;
}
Пример: autoprefixer
Пример кода из доклада PostCSS: будущее после Sass и LESS
a {
left : 10px;
text-align: left ;
}
a {
right : 10px;
text-align: right ;
}
Пример: rtlcss
Изменяет дизайн для арабского и иврита
Пример кода из доклада PostCSS: будущее после Sass и LESS
Другие способы использования
1. Создание спрайтов.
2. Группировка селекторов по медиавыражениям.
3. Объединение файлов.
4. Тысячи других.
Rework – первый,но не единственный
1. Rework – самый старый, больше всего плагинов.
2. PostCSS – лучше поддержка карт кода, сохраняет форматирование,
много дополнительных хелперов, более надежный парсер.
3. CSSComb-core – самый быстрый и универсальный парсер,
поддержка синтаксиса SASS и LESS, нет карт кода.
Как использовать
1. Отдельные библиотеки с CLI.
2. grunt и gulp плагины.
3. Через node.js.
Свой постпроцессор. Проблема
Современные браузеры:
a :: after { }
Для IE 8:
a : after { }
Свой постпроцессор. Код
var coloner = postcss(function (css) {
css.eachRule(function (rule) {
if ( rule.selector.match(/::/) )
rule.selector += ', ' +
rule.selector.replace('::', ':');
});
});
Вход: Выход:
a::after {
content: "→"
}
a::after, a:after {
content: "→"
}
Свой постпроцессор. Результат
var fixed = coloner.process(css).css;
Резюме
1. Препроцессоры это хорошо – но не для всех задач.
2. Многое из того что сейчас делаются через препроцессоры
или руками, гораздо проще делать через постпроцессоры.
3. Есть множество готовых постпроцессоров на все случаи жизни.
4. Свои постпроцессоры писать очень просто и быстро.
5. Пробуйте, пишите, экспериментируйте, выкладывайте на Github.
6. Задавайте вопросы если вам что-то непонятно – вам обязательно
помогут!
