Верстка \ Препроцессоры css

Начало работы с PostCSS в 2019 году: основы преобразования CSS

От автора: сегодня поговорим о работе с PostCSS и CSS. Если вы когда-нибудь хотели опробовать в коде новые, экспериментальные или нестандартные свойства CSS, то вы знаете, что поставщики браузеров требуют добавления префиксов, чтобы они работали, пока не будут полностью стандартизированы.

Читать далее

Верстка \ Препроцессоры css

Почему мы решили отказаться от LESS в пользу SCSS: сравнение препроцессоров CSS

От автора: прежде всего, что такое препроцессор? Вкратце препроцессор – это программа, модифицирующая данные под входные требования другой программы. Препроцессоры CSS – это скриптовый язык, расширяющий возможности обычного CSS переменными, правилами вложенности, функциями и логическими блоками.

Читать далее

Верстка \ Препроцессоры css

Создание плавной последовательной анимации CSS с Sass

От автора: в этой статье я покажу, как создается плавная анимация CSS с помощью Sass цикла for. Эту анимацию можно использовать в вашем приложении, неважно используете вы React, Vue или Angular.

Читать далее

Верстка \ Препроцессоры css

Использование Sass для управления диапазоном с помощью нейминга BEM в CSS

От автора: управление диапазоном — это та вещь, которую вы вероятно не будете учитывать при работе с BEM CSS и Sass. У нас в распоряжении есть доступ к амперсанду (&) уже довольно давно, он предоставляет нам уровень охвата, но это теряет полезность, когда у нас есть довольно глубокий уровень вложенности. & может повести нас по неправильному пути, и последствия будут довольно непредсказуемыми.

Читать далее

Верстка \ Препроцессоры css

Используйте @import в CSS-препроцессорах аккуратно

От автора: вдохновлённые функцией CSS import, которая импортирует правила стилей из других таблиц стилей, такие популярные CSS-препроцессоры как Sass, Less и Stylus также ввели собственные директивы @import. Они эффективно помогают начать компилировать модульные таблицы стилей с использованием переменных, миксинов и других функций каждого препроцессора.

Читать далее

Верстка \ Препроцессоры css

Изучаем LESS: Применение на практике

От автора: сегодня мы завершаем серию публикаций «Изучаем LESS», мы поговорим про применение LESS в веб-разработке. Сегодняшний пост немного отличается от предыдущих тем, что мы не будем демонстрировать новые техники и примеры кода, а рассмотрим, как использовать LESS, обсудим проекты, с помощью которых вы можете начать разработку с использованием LESS и многое другое.

Читать далее

Верстка \ Препроцессоры css

Изучаем LESS: Разделяй и властвуй над кодом

От автора: итак, мы плавно подошли к концу серии «Изучаем LESS», и эта тема — моя любимая. Одной из самых лучших особенностей является то, что можно сделать LESS код модульным и организованным, при этом не засорять сайты (если вы компилируете его посредством LESS.app, CodeKit или других компиляторов).

Читать далее

Верстка \ Препроцессоры css

Изучаем LESS: Использование функций

От автора: мы продолжаем нашу серию статей Изучаем LESS и сегодня рассмотрим, как используются в LESS функции, которые помогут вам писать более чистый код. Если вы еще не читали наши предыдущие четыре публикации по этой теме, ознакомьтесь со статьями Введение, Переменные, Миксины и Вложенные правила.

Читать далее

Верстка \ Препроцессоры css

Изучаем LESS: Вложенные правила

От автора: мы продолжаем нашу серию статей «Изучаем LESS», и сегодня мы рассмотрим, как делать в LESS правило вложенным, чтобы писать максимально чистый код. Вы еще не читали наши три предыдущие статьи: «Изучаем LESS: Введение», «Изучаем LESS: Переменные» и «Изучаем LESS: Миксины»? Обязательно прочтите.

Читать далее