Пояснення CSS-препроцесорів

Препроцесори CSS дедалі більше стають опорою у робочому процесі веб-розробників інтерфейсу. CSS - це неймовірно складна і нюансована мова, і, намагаючись полегшити його використання, розробники часто звертаються до використання препроцесорів, таких як SASS або LESS.

Препроцесори CSS компілюють код, який написаний за допомогою спеціального компілятора. Потім вони використовують це для створення файлу CSS, на який потім може посилатися основний документ HTML.

Використовуючи будь-який CSS-препроцесор, ви зможете програмувати в звичайному CSS так само, як і якщо б препроцесор не був на місці. Добре, що у вас також є більше доступних варіантів. Деякі, такі як SASS, мають специфічні стандарти стилю, які мають на меті зробити написання документа ще простішим, наприклад, свободу пропускати фігурні дужки, якщо хочете.

Звичайно, CSS-попередники також пропонують інші функції. Багато запропонованих функцій неймовірно схожі між препроцесорами, лише незначні відмінності в синтаксисі. Таким чином, ви можете вибрати майже будь-кого, кого побажаєте, і ви зможете досягти тих самих речей. Деякі з найбільш корисних функцій:

Змінні

Одним з найбільш часто використовуваних елементів у будь-якій мові програмування є змінна, чого особливо не вистачає CSS. Маючи у своєму розпорядженні змінні, ви можете один раз визначити значення та повторно використовувати його протягом усієї програми. Прикладом цього в SASS може бути:

$yourcolor: #000056 .yourDiv { color: $yourcolor; }

Оголосивши SASS yourcolorзмінну один раз, тепер можна повторно використовувати цей самий точний колір у всьому документі, не вимагаючи перевизначення визначення.

Петлі

Ще одним поширеним елементом у мовах є цикли, чогось ще не вистачає CSS. Цикли можна використовувати для повторення одних і тих самих інструкцій кілька разів без необхідності повторного повторного введення. Прикладом із SASS може бути:

@for $vfoo 35px to 85px { .margin-#{vfoo} { margin: $vfoo 10px; } }

Цей цикл позбавляє нас від необхідності писати один і той же код кілька разів, щоб змінити розмір поля.

Якщо / Інші заяви

Ще однією особливістю, якої не вистачає CSS, є оператори If / Else. Вони виконуватимуть набір інструкцій, лише якщо задана умова відповідає дійсності. Прикладом цього в SASS може бути:

@if width(body) > 500px { background color: blue; } else { background color: white; }

Тут колір фону буде змінювати колір залежно від ширини тіла сторінки.

Це лише декілька основних функцій попередників CSS. Як бачите, попередні процесори CSS - це неймовірно корисні та універсальні інструменти. Багато веб-розробники використовують їх, і настійно рекомендується вивчити хоча б одного з них.

Більше інформації:

  • Найкращі підручники з CSS
  • Документи SASS: //sass-lang.com/
  • SASS, препроцесор для вашого веб-гарніру
  • МЕНШЕ документів: //lesscss.org/
  • Документи стилуса: //stylus-lang.com/