Препроцессоры — это инструменты, которые позволяют разработчикам с помощью новых синтаксических конструкций расширить возможности CSS. Например, они добавляют селекторы наследования, вложенные правила, примеси и многие другие.

Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте.

В обзоре рассмотрим наиболее популярные препроцессоры в 2023 году и расскажем, как выбрать подходящий.

Препроцессор Sass

Sass (Syntactically Awesome Style Sheets) — один из первых CSS-препроцессоров, создан в 2007 году и имеет большое сообщество разработчиков. На github.com у Sass 3500 звёзд, еженедельно препроцессор скачивает более одиннадцати миллионов разработчиков:

Источник npmjs.com
Источник npmjs.com

Sass расширяет возможности CSS, добавляя вложенные правила, использование ссылки на родительский селектор, вложенные свойства, шаблонные селекторы.

Sass позволяет вкладывать правила CSS друг в друга. Благодаря этому, родительские селекторы не повторяются и CSS-файлы со множеством вложенных селекторов становятся понятнее:

Источник sass-scss.ru
Источник sass-scss.ru

Среди CSS-свойств существует разные пространства имён, например, font. Чтобы каждый раз не вводить пространство имён при указании свойства, с помощью Sass можно указать пространство один раз, и затем добавлять нужные свойства:

Источник sass-scss.ru
Источник sass-scss.ru

Кроме того, Sass предоставляет возможность использовать операторы и функции, что весьма упрощает написание и поддержку CSS.

Это самостоятельный препроцессор, который не требует установки дополнительных инструментов. Его можно использовать с любым проектом, который применяет CSS, и компилировать с помощью инструмента Sass CLI или плагинов для сборки.

Препроцессор имеет два отдельных синтаксиса — Sass и SCSS.

Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS, считается устаревшим. Он использует отступы вместо фигурных скобок, они указывают на вложение селекторов. Новые строки заменяют точки с запятой для разделения свойств:

@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded

  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle

  &:hover
    cursor: pointer

  &:disabled
    color: $mdc-button-disabled-ink-color
    cursor: default
    pointer-events: none

SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover { cursor: pointer; }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

Сегодня SCSS является более используемой версией, но и у синтаксиса Sass остаются свои приверженцы. SCSS — стабильный и широко поддерживаемый препроцессор, часто используется в проектах, для него создают множество плагинов и расширений для улучшения функциональности.

Препроцессор LESS

LESS — это тоже распространённый препроцессор, у него 16 900 звёзд на github.com и около 5 миллионов скачиваний в неделю на npmjs.com.

Источник npmjs.com
Источник npmjs.com

LESS был выпущен в 2009 году, поддерживает переменные, вложенные правила и миксины. Но он имеет менее сложный синтаксис, чем Sass, что делает его простым для изучения и использования.

Подобно Sass, LESS является самостоятельным препроцессором, его код компилируется в обычный CSS. Для компиляции используют LESS CLI или плагины, интегрированные в систему сборки проекта.

Препроцессор bмеет схожие с Sass базовые функции. Но LESS обладает дополнительными возможностями — в нём можно поднимать переменные, извлекать определённые компоненты из цвета, например, оттенок, насыщенность, яркость и контрастность.

В коде одно и то же свойство может повторяться множество раз. Переменные облегчают поддержку кода, предоставляя возможность управлять свойствами из одного места. Любая переменная в LESS инициализируется как директива, с использованием символа @ в начале.

Переменные можно использовать, например, в именах селекторов или свойств, URL-адресах и операторах @import.

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

С помощью LESS этот пример компилируется в CSS:

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

LESS используют множество разработчиков, он имеет широкий набор функций, быстрый и эффективный в использовании.

Препроцессор Stylus

Stylus — CSS-препроцессор, написанный на Node.js, создан в 2010 году. Использует синтаксис, похожий на Python.

font-size = 14px
font-stack = "Lucida Grande", Arial, sans-serif

body
  font font-size font-stack

//Компилируется в CSS:
body {
  font: 14px "Lucida Grande", Arial, sans-serif;
}

Он добавляет множество функций — переменные, вложенные правила, миксины и наследование стилей. Stylus также имеет мощный набор своих функций, в том числе операторы, условные выражения и циклы.

У Stylus не такая обширная база пользователей, как у LESS и Sass. У него 11 100 звёзд на github.com и больше 3 миллионов скачиваний в неделю.

Источник npmjs.com
Источник npmjs.com

Stylus удобен для работы и имеет свои преимущества. Его отличает гибкость — работая в нём, можно не использовать двоеточия, точки с запятой и запятые. Например, так будет выглядеть задание свойств сразу для нескольких селекторов:

textarea, input
  border 1px solid #eee

Также не нужны фигурные скобки для определения блоков, вместо них используются отступы. Для переменных, как и в Sass, применяется знак $.

$font-size = 14px
body {
  font: $font-size sans-serif;
}

Эти особенности позволяют разработчику сокращать время написания и создавать чистый код. Но в такой гибкости есть недостаток — при работе над крупным проектом код становится сложным для восприятия, так как отсутствуют чёткие разделители и идентификаторы.

Инструмент PostCSS

PostCSS — это инструмент, который позволяет преобразовывать CSS с помощью плагинов. Его выпустили в 2013 году, и сейчас он существует в 7 версии. Он не добавляет новый синтаксис, как Sass или LESS, но предоставляет возможность модифицировать CSS с помощью JavaScript-плагинов.

У PostCSS множество плагинов, позволяющих выполнить широкий спектр задач, таких как оптимизация CSS-кода и многие другие. Благодаря этому, PostCSS позволяет гибко настраивать процесс компиляции CSS, используя только те плагины, которые нужны для конкретного проекта.

PostCSS также интегрируется с различными сборщиками проектов, например, с Webpack или Gulp, и позволяет автоматически запускать компиляцию CSS при изменении исходного кода, что делает его гибким и удобным в использовании.

Какой препроцессор выбрать

Выбор препроцессора основывается на конкретных требованиях проекта, личных предпочтениях и опыте разработчика, а также на возможностях интеграции с другими инструментами и CMS.

Если вы новичок, то лучше начать с простых препроцессоров, таких как Sass или LESS. Эти препроцессоры имеют более простой синтаксис, чем чистый CSS, большое сообщество, которое может помочь со сложными вопросами. Если вы опытный разработчик, то PostCSS — хороший выбор, так как он предоставляет более широкие возможности настройки и оптимизации.

👉 Новичкам — Sass или LESS, опытным — PostCSS

Если вы работаете над большим проектом, то отлично подойдут Sass или LESS. Они имеют более структурированный синтаксис, который облегчит управление большим объёмом кода. Если вы заняты маленьким проектом, то PostCSS позволяет использовать только необходимые плагины, что может сделать процесс компиляции более быстрым и эффективным.

👉 Для большого проекта — Sass или LESS, для маленького — PostCSS

Если вам нужно оптимизировать CSS-код, то PostCSS может быть лучшим выбором, так как он предоставляет множество плагинов для оптимизации CSS.

👉 Для оптимизации кода — PostCSS

Некоторые разработчики выбирают более традиционные препроцессоры Sass или LESS, в то время как другие предпочитают гибкий инструмент PostCSS. Выбор препроцессора основывается на опыте и личных предпочтениях разработчика.

👉 Если нужен более гибкий инструмент — PostCSS

Важно учитывать, что не все препроцессоры поддерживаются инструментами сборки проектов и CMS. Например, если вы работаете с WordPress, то удобнее использовать препроцессоры, которые легко интегрируются с этой CMS — Sass или LESS.

👉 Если работаете с WordPress — Sass или LESS

При работе в команде выбор препроцессора может зависеть от предпочтений и опыта других разработчиков. Лучше всего обсудить этот вопрос с командой и выбрать препроцессор, который будет удобен для всех участников проекта.

👉 При работе в команде — выбор согласуется со всеми

Также следует учитывать, что некоторые препроцессоры могут иметь большой объём кода, что может сказаться на производительности и скорости загрузки сайта. В таких случаях используют оптимизирующие плагины или инструменты, которые помогают уменьшить размер CSS-кода.

Материалы по теме


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

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

Новое в 2023 — text-wrap: balance

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance. Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

h1 {
  text-wrap: balance;
}

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body.

Вот пример заголовка <h1>text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

CSS
  • 13 ноября 2023
Знакомство с CSS

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

Читать дальше
CSS
  • 1 ноября 2023
Увеличение ссылки при наведении

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a {
  display: inline-block;
  transition: transform 0.3s ease;
}
a:hover {
  transform: scale(1.2);
}

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах <a> на темно-красный, а свойство text-decoration: none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2), которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

Демо:

Читать дальше
CSS
  • 13 октября 2023
WOFF больше не нужен

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face, включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face:

@font-face {

  font-family: "Open Sans";
  src: url("opensans.woff2") format('woff2');

}

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4–35
  • Edge 12 и 13
  • Safari 3–9.1
  • Firefox 2–38
  • Opera 22 и ниже
  • Android 4.4.4 KitKat и ниже (а это <0.5% устройств на Android)
  • Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

CSS
  • 23 сентября 2023
Трясём пароль с помощью CSS

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

Читать дальше
CSS
  • 7 сентября 2023
Как сделать тёмную тему на сайте

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html, styles.css и script.js.

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Переключатель темы</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="themeToggle">Переключить тему</button>
    <h1>Заголовок</h1>
    <p>Абзац текста. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <ul>
        <li>Элемент списка 1</li>
        <li>Элемент списка 2</li>
        <li>Элемент списка 3</li>
    </ul>
    <div class="boxed-text">
        Блок текста в рамке.
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body {
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease;
}

body.light-theme {
    background-color: #ffffff;
    color: #000000;
}

body.dark-theme {
    background-color: #121212;
    color: #ffffff;
}

.boxed-text {
    border: 2px solid currentColor;
    padding: 15px;
    margin-top: 20px;
}

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() {
    const currentTheme = document.body.className;
    if (currentTheme === 'light-theme') {
        document.body.className = 'dark-theme';
    } else {
        document.body.className = 'light-theme';
    }
});

При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

Читать дальше
CSS
  • 29 августа 2023
4 способа центрировать текст в CSS

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое (text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в <div> с классом center-both:

<div class="center-both">
  <p>Центрированный текст</p>
</div>

И флексим:

.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
}

Получается так:

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center:

.center-both {
  display: grid;
  place-items: center;
}

Результат:

Работает.

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А <p> внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both {
  position: relative;
}

.center-both p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height, равный высоте родительского элемента.

.center-both {
  line-height: 200px; /* Пример высоты */
  text-align: center;
}

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:


Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

🐈

CSS
  • 28 августа 2023
CSS-свойство contain

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container {
  contain: strict;
}
Читать дальше
CSS
  • 14 июля 2023
Как задать позицию и размер элемента. CSS-свойство inset

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top, right, bottom и left, которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element {
  inset: 10px 20px 30px 40px;
}
Читать дальше
CSS
  • 13 июля 2023