Главная » Архив меток: Препроцессоры css

Архив меток: Препроцессоры css

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

От автора: сегодня поговорим о работе с PostCSS и CSS. Если вы когда-нибудь хотели опробовать в коде новые, экспериментальные или нестандартные свойства CSS, то вы знаете, что поставщики браузеров требуют добавления префиксов, чтобы они работали, пока не будут полностью стандартизированы. .some-element { box-sizing: border-box; -webkit-box-sizing: border-box; // chrome, safari prefix -moz-box-sizing: border-box; // firefox -o-box-sizing: border-box; // old opera versions ...

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

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

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

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

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

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

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

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

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

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