От автора: в Sass есть множество встроенных функций, с помощью которых можно намного быстрее и легче настроить стили для проекта. Давайте изучим их!

Продолжить чтение →

От автора: в CSS появились пользовательские свойства. Последнее время мы о них часто писали. Поддержка в браузерах хорошая, но ее нет и не будет в старых браузерах типа IE. Я так и вижу, насколько хорош будет «будущий CSS», если позволить препроцессорам портировать его на CSS, совместимый со старыми браузерами. Babel для CSS! Почему нет?!

Продолжить чтение →

От автора: я работал с Sass на протяжении многих лет. Но сейчас я хочу поменять способ написания стилей с помощью PostCSS и плагина cssnext. Мне нравится идея, что уже сегодня можно писать CSS синтаксисом будущего и использовать инструменты, подходящие под те, к которым я привык. Мой личный сайт идеально подходит для тестирования новых функций.

Продолжить чтение →

От автора: у нас есть Sass, LESS, Stylus, зачем нам препроцессор PostCSS? У Sass есть свой уникальный синтаксис, а у PostCSS нет особых ограничений по написанию стилей. Это больше инструмент трансформации CSS. Трансформации в PostCSS осуществляются с помощью плагинов, написанных на JS. Входящий CSS конвертируется в дерево, которое потом трансформируется плагинами. Конечный этап заключается в обратной конвертации дерева в CSS при помощи PostCSS.

Продолжить чтение →

От автора: узнайте, как с помощью этой маленькой, но мощной PostCSS функции создавать системы сеток, о которых вы всегда мечтали. Flexbox – замечательный инструмент для сокращения кода. Кроме того, в нем есть несколько отличных функций по изменению порядка сортировки элементов и выравнивания. Однако данный инструмент не проводит вычисления по размерам колонок и разделителей. Эксперты повторяют из раза в раз: Flexbox – хороший инструмент, но это не система сеток.

Продолжить чтение →

От автора: если вы смотрели старые фантастические фильмы, то должны знать, насколько циклы там мощная штука. Скормите роботу бесконечный цикл и бабах. Останется от робота только пыль. Циклы в препроцессорах не вызывают драматических взрывов в космосе (надеюсь), но они очень полезны при написании чистого CSS кода. Пока все говорят о библиотеках шаблонов и модульном дизайне, основное внимание приковано к CSS селекторам. Неважно, в чем вы пишите селекторы (BEM, OOCSS, SMACSS, ETC), циклы добавят читабельности вашим шаблонам и упростят работу с ними, заложив их в ваш код.

Продолжить чтение →

От автора: на сайте SitePoint в статье 7 PostCSS плагинов, которые помогут вам легче понять PostCSS, появилось обсуждение по поводу PostCSS-cssnext. PostCSS-cssnext – плагин-пакет для написания CSS кода следующего поколения. Эта статья дает представление об истории проекта и его преимуществах. Сначала мы поближе познакомимся с PostCSS-cssnext, после чего перейдем на несколько примеров, с которыми вы потом сможете поиграться. После прочтения статьи вы будете хорошо знакомы с синтаксисом CSS будущего на основе PostCSS-cssnext, а также сможете использовать его в своих будущих проектах!

Продолжить чтение →

От автора: организация – большой шаг в любом проекте, особенно если вы подняли проект через 6 месяцев. В Sass есть два синтаксиса. Первый – SCSS (Sassy CSS) является расширенным синтаксисом CSS. То есть любой валидный CSS файл можно считать валидным SCSS файлом. Кроме того, SCSS понимает большую часть CSS хаков и вендорные префиксы, а также старый синтаксис фильтров для IE. Этот синтаксис усиливается возможностями Sass, о которых я расскажу ниже. Файлы с этим синтаксисом имеют расширение .scss.

Продолжить чтение →

От автора: переменные – одна из главных причин, по которой вообще существуют CSS препроцессоры. Очень удобная возможность установить переменную для таких вещей, как цвет, и использовать ее потом в коде. Так ваш код будет структурирован, в нем не будет повторений, и его можно будет легко изменить. Также вы можете воспользоваться нативными CSS переменными (пользовательские свойства). Но между ними есть важные различия, про которые необходимо знать.

Продолжить чтение →

От автора: в этом уроке мы проговорим, что такое CSS-препроцессор, как его установить и использовать, рассмотрим преимущества препроцессоров, разберем практические примеры по работе с препроцессорами. А так же получите рекомендации по изучению препроцессоров.

Продолжить чтение →