От автора: в 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 – хороший инструмент, но это не система сеток.

Читать далее →

От автора: на сайте 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-препроцессор, как его установить и использовать, рассмотрим преимущества препроцессоров, разберем практические примеры по работе с препроцессорами. А так же получите рекомендации по изучению препроцессоров.

Читать далее →

От автора: методы обратной связи очень важны в любом языке программирования. В JavaScript’е вы, возможно, используете console.log() или alert(). В PHP это var_dump() или print_r(). В Ruby вы можете воспользоваться debug или inspect. С помощью этих функций вы можете отлаживать любое значение в коде и узнать, что делает ваш код на любой стадии в заложенной вами логике.

В Sass для этого существует три директивы. Это @error, @warn и @debug. В этой статье мы рассмотрим, как их использовать, в каких случаях удобнее всего ими пользоваться и что они возвращают.

Читать далее →