Препроцессоры. Препроцессор CSS: обзор, выбор, применение

Современный CSS - мощь, а в комбинации с препроцессорами - вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете, как использовать миксины, переменные и директивы для ещё большего контроля над стилями.

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

Зачем использовать Sass/SCSS вместо CSS?

1. Вложенность - SCSS позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам (а если речь идёт о Sass, то там и без скобок всё красиво и интуитивно понятно).
2. Переменные - в стандартном CSS тоже есть понятие переменных, но в Sass с ними можно работать немного по-другому. Например, повторять их через директиву @for . Или генерировать свойства динамически. Подробнее можете изучить на русскоязычном сайте проекта.
3. Улучшенные математические операции - можно складывать, вычитать, умножать и делить значения CSS. В отличие от стандартного CSS, Sass/SCSS позволяют обойтись без calc() .
4. Тригонометрия - SCSS позволяет писать собственные (синусоидальные и косинусоидальные) функции, используя только синтаксис Sass/SCSS, подобно тому, как это можно делать в других языках вроде JavaScript.
5. Директивы @for , @while и выражение @if-else - можно писать CSS-код, используя знакомые элементы из других языков. Но не обольщайтесь - в итоге на выходе будет обычный CSS.
6. Миксины (примеси) - можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями. Миксины можно использовать для создания отдельных тем одного макета. Примеси также могут содержать целые CSS-правила или что-либо другое, разрешённое в Sass-документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.
7. Функции - можно создавать определения CSS в виде функций для многократного использования.

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

Sass не динамичен. У вас не получится генерировать и/или анимировать CSS-свойства и значения в реальном времени. Но можно их создавать более эффективным способом и позволить стандартным свойствам (вроде анимации на CSS) заимствовать их оттуда.

Синтаксис

SCSS особо не добавляет никаких новых возможностей CSS, кроме нового синтаксиса, часто сокращающего время написания кода.

Пререквизиты

Существует 5 CSS-препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Эта статья по большей части охватывает SCSS, который похож на Sass. Детальнее об этих препроцессорах можете прочитать на Stack Overflow (оригинал) или на qaru (перевод на русский).

SASS  -  (.sass) S yntactically A wesome S tyle S heets.

SCSS  -  (.scss) Sass y C ascading S tyle S heets.

Расширения.sass и.scss похожи, но всё-таки не одинаковы. Для фанатов командной строки приводим способ конвертации:

# Конвертация из Sass в SCSS $ sass-convert style.sass style.css # Конвертация из SCSS в Sass $ sass-convert style.scss style.sass

Sass - первая спецификация для SCSS с расширением файла.sass . Её разработка началась ещё в 2006 году, но позже был разработан альтернативный синтаксис с расширением.scss .

Обратите внимание Другие препроцессоры функциональностью похожи на SCSS, но синтаксис может отличаться. А ещё, всё то, что работает в CSS, будет также прекрасно воспроизводиться и в Sass, и в SCSS.

Переменные

Sass/SCSS позволяет работать с переменными. В CSS они обозначаются двойным тире (--), а в препроцессорах знаком доллара ($).

$number: 1; $color: #ff0000; $text: "tproger forever."; $text: "IT forever." !default; $nothing: null;

Вы можете присваивать значение по умолчанию переменным, у которых ещё нет значения, добавив метку!default в конце значения. В таком случае, если переменной уже было присвоено значение, оно не изменится; если же переменная пуста, ей будет присвоено новое указанное значение.

#container { content: $text; }

Переменные в Sass могут быть присвоены любому свойству.

Вложенные правила

Стандартные вложенные CSS-элементы с использованием пробела:

/* Вложенные правила */ #A { color: red; } #A #B { color: green; } #A #B #C p { color: blue; }

Те же вложенные элементы с помощью SCSS:

/* Вложенные правила */ #A { color: red; #B { color: green; #C p { color: blue; } } }

Как видно, синтаксис выглядит более чистым и менее повторяющимся.

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

За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.

Амперсанд

С помощью символа & вы можете явно указать, где должен быть вставлен родительский селектор.

Результат компиляции Sass (из предыдущего примера) в CSS ниже.

#p {color: black;} #p a {font-weight: bold;} #p a:hover {color: red;}

В итоге амперсанд был компилирован в название родительского элемента a (a:hover).

Миксины (они же примеси)

Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд (&), вы ведь помните про него?

Пример работы с несколькими браузерами

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов(-webkit- или -moz-).

Миксины позволяют создавать группы деклараций CSS, которые вам придётся использовать несколько раз на сайте. Хорошей практикой будет использование миксинов для вендорных префиксов. Пример:

@mixin border-radius($radius) { // Префиксы для: -webkit-border-radius: $radius; // Chrome и Safari -moz-border-radius: $radius; // Firefox -ms-border-radius: $radius; // Internet Explorer -o-border-radius: $radius; // Opera border-radius: $radius; // Стандартный CSS } // Пример использования миксина border-radius после его создания.box { @include border-radius(10px); }

Арифметические операции

Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em).

Сложение и вычитание

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

Пример вычитания:

Умножение

Выполняется точно так же, как в CSS, с помощью calc(a * b) , но без calc и круглых скобок. Кроме того, можно ещё отделять знак умножения пробелами от чисел (5*6 == 5 * 6).

Исключение Нельзя умножать пиксели между собой. То есть, 10px * 10px != 100px . 10px * 10 == 100px .

P { width: 10px * 10px; // ОШИБКА! width: 10px * 10; // 100px width: 1px * 5 + 5px; // 10px width: 5 * (5px + 5px); // 50px width: 5px + (10px / 2) * 3; // 20px }

Деление

С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.

/* краткая форма записи свойств */ font: italic bold .8em/1.2 Arial, sans-serif; /* стандартная форма записи свойств */ font-style: italic; font-weight: bold; font-size: .8em; line-height: 1.2; font-family: Arial, sans-serif;

Есть три помощника, которые намекнут на возможность деления:

1. Значение (или любая его часть) хранится в переменной или возвращается функцией.
2. Значения заключены в круглые скобки.
3. Значение используется как часть другого арифметического выражения.

$var1: 20; $var2: 4; p { top: 16px / 24px; // Отображается без изменений в стандартном CSS top: (20px / 5px); // Производится деление (но только при использовании скобок) top: #{$var1} / #{$var2}; // Выводится как обычный CSS-код, деление не выполняется top: $var1 / $var2; // Деление выполняется top: random(4) / 5; // Деление выполняется (если использовать в паре с функцией) top: 2px / 4px + 3px; // Деление выполняется, если добавлена ещё одно арифметическое действие }

Результат компиляции в CSS:

P { top: 16px / 24px; top: 4; top: 20 / 4; top: 5; top: 0.6; top: 3.5px; }

Остаток

Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.

@mixin zebra() { @for $i from 1 through 7 { @if ($i % 2 == 1) { .stripe-#{$i} { background-color: black; color: white; } } } } * { @include zebra(); text-align: center; }

Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.

Для создания образца надо написать несколько HTML-элементов.

Результат в браузере:

Зебра успешно сгенерирована миксином zebra

Операторы сравнения

Директива @if принимает выражение SassScript и использует вложенные в неё стили в случае, если выражение возвращает любое значение, кроме false или null .

Ниже показано, как работают директивы @if и @else , вложенные в миксин.

@mixin spacing($padding, $margin) { @if ($padding > $margin) { padding: $padding; } @else { padding: $margin; } } .container { @include spacing(10px, 20px); }

Сравнение в действии. Миксин spacing выберет размеры padding ’а, если тот будет больше, чем margin .

После компиляции в CSS:

Container { padding: 20px; }

Логические операторы

Описание логических операторов

Использование логических операторов Sass для создания кнопки, у которой будет меняться фон в зависимости от её ширины.

@mixin button-color ($height, $width) { @if (($height < $width) and ($width >= 35px)) { background-color: blue; } @else { background-color: green; } } .button { @include button-color(20px, 30px) }

Строки

В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.

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

P { font: 50px Ari + "al"; // Компилируется в 50px Arial }

Пример ниже демонстрирует, как делать не надо.

P { font: "50px" + Arial; // ОШИБКА! }

Можете складывать строки разных типов, если в них нет пробелов. Пример ниже не будет скомпилирован.

P:after { content: "Верните Линуса " + Торвальдса!; // ОШИБКА! }

P:after { content: "Верните Линуса " + "Торвальдса!"; // обратите внимание на "Торвальдса!" }

Пример сложения нескольких строк:

P:after { content: "Удел " + "человечества " + "-" + "итерация."; }

Сложение строк и чисел:

P:after { content: "Рекурсия " + 2013 + " удел небожителей"; }

Обратите внимание Свойство content работает только с псевдоселекторами:before и:after . Рекомендуется не использовать content в CSS-документе, а напрямую использовать его между тегами в HTML.

Операторы управления потоками

В SCSS есть функции (fucntion()) и директивы (@directive). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.

Функции обычно заключаются в скобки, следующие сразу за её именем. А директива начинается с символа @ .

Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.

if()

if() - это функция (и иногда основа искусственного интеллекта).

Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.

/* Использование функции if() */ if (true, 1px, 2px) => 1px; if (false, 1px, 2px) => 2px;

@if

@if - это директива, использующаяся для разветвления на основе условия.

/* Использование директивы @if */ p { @if 1 + 1 == 2 { border: 1px solid; } @if 7 < 5 { border: 2px dotted; } @if null { border: 3px double; } }

Результат компиляции:

P { border: 1px solid; }

Ниже показано комбо-разветвление с добавлением директивы @else .

/* Создание переменной $type */ $type: river; /* Окрашивание контейнеров в синий в случае, если значение для переменной $type - river */ div { @if $type == river { color: blue; } } /* Условные цвета для текста в теге

*/ p { @if $type == tree { color: green; } @else if $type == river { color: blue; } @else if $type == dirt { color: brown; } }

Проверка на наличие родительского элемента

Амперсанд выбирает родительский элемент, если тот существует. В ином случае вернёт null . Поэтому может использоваться совместно с директивой @if .

В следующих примерах рассмотрим создание условных CSS-стилей в зависимости от наличия родительского элемента.

/* Проверка на наличие родительского элемента */ @mixin does-parent-exist { @if & { /* Применение голубого цвета родительскому элементу, если он существует */ &:hover { color: blue; } } @else { /* Родительский элемент отсутствует, применение голубого цвета к ссылкам */ a { color: blue; } } }

Директива @for

Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.

Директива @for итерируется 5 раз.

@for $i from 1 through 5 { .definition-#{$i} { width: 10px * $i; } }

Результат компиляции в CSS:

Definition-1 { width: 10px; } .definition-2 { width: 20px; } .definition-3 { width: 30px; } .definition-4 { width: 40px; } .definition-5 { width: 50px; }

Директива @each

Директива @each устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var .

@each $animal in platypus, lion, sheep, dove { .#{$animal}-icon { background-image: url("/images/#{$animal}.png") } }

Результат компиляции в CSS:

Platypus-icon { background-image: url("/images/platypus.png"); } .lion-icon { background-image: url("/images/lion.png"); } .sheep-icon { background-image: url("/images/sheep.png"); } .dove-icon { background-image: url("/images/dove.png"); }

Директива @while

Директива @while принимает выражение SassScript и циклично выводит вложенные в неё стили, пока выражение вычисляется как true . Она может быть использована для создания более сложных циклов, чем таких, для которых подходит @for , хотя она бывает необходима довольно редко. Например:

$index: 5; @while $index > 0 { .element-#{$index} { width: 10px * $index; } $index: $index - 1; }

Результат компиляции:

Element-5 { width: 50px; } .element-4 { width: 40px; } .element-3 { width: 30px; } .element-2 { width: 20px; } .element-1 { width: 10px; }

Функции в Sass/SCSS

Используя Sass/SCSS можно использовать функции так же, как и в других языках.

Создадим функцию three-hundred-px() , возвращающую 300px.

@function three-hundred-px() { @return 300px; } .name { width: three-hundred-px(); border: 1px solid gray; display: block; position: absolute; }

После применения класса.name ширина элемента будет равна 300 пикселям.

Функции в Sass могут возвращать любое корректное значение CSS и могут быть назначены любому свойству. Они даже могут быть рассчитаны на основе переданного аргумента.

@function double($width) { @return $width * 2; }

Тригонометрия

Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.

Их работу стоит изучать, если нужно сократить время, затрачиваемое на разработку анимаций пользовательского интерфейса, например для создания троббера . Мы, кстати, уже об этом в одной из статей. Но в данном случае это будет код, а не gif-картинка, вставленная в HTML-документ.

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

Преимущество использования тригонометрии в сочетании с CSS выражается в отсутствии дополнительных HTTP-запросов, как это происходит с gif-изображениями.

Можно писать тригонометрические функции на Sass. Об этом читайте далее.

Написание собственных функций

В тригонометрии многие операции основаны на функциях. Каждая функция строится на основе другой. Например, функция rad() требует использования PI() . Функции cos() и sin() требуют использование rad() .

@function PI() { @return 3.14159265359; }

Написание функций на Sass/SCSS очень похоже на написание функций в других языках.

Использование функции pow() :

@function pow ($number, $exp) { $value: 1; @if $exp > 0 { @for $i from 1 through $exp { $value: $value * $number; } } @else if $exp < 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

Использование функции rad() :

@function rad ($angle) { $unit: unit ($angle); $unitless: $angle / ($angle *0 + 1); //Если значение angle (угла) указано в градусах ("deg"), нужно конвертировать его в радианы. @if $unit == deg { $unitless: $unitless / 180 * PI(); } @return $unitless; }

Для вычисления тангенса функцией tan() нужно применить функции sin() и cos() ..

Абсолютно все опытные верстальщики используют препроцессоры. Исключений нет. Если вы хотите добиться успеха в этой деятельности, не забывайте об этих программах. С первого взгляда они могут вызвать у новичка тихий ужас - это уже слишком похоже на программирование! На самом деле можно разобраться со всеми возможностями препроцессоров CSS примерно за день, а если постараться, то и за пару часов. В дальнейшем они существенно упростят вам жизнь.

Как появились препроцессоры CSS

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

Когда только-только началось массовое применение интернета, никаких таблиц стилей не существовало. Оформление документов зависело исключительно от браузеров. В каждом из них были свои стили, которые использовались для обработки определенных тегов. Соответственно, страницы выглядели по-разному в зависимости от того, в каком браузере вы их открывали. Результат - хаос, путаница, проблемы для разработчиков.

В 1994 году норвежский ученый Хокон Ли разработал таблицу стилей, которая могла использоваться для оформления внешнего вида страницы отдельно от HTML-документа. Идея приглянулась представителям консорциума W3C, которые тотчас же принялись за ее доработку. Спустя несколько лет вышла в свет первая версия спецификации CSS. Затем она постоянно совершенствовалась, дорабатывалась… Но концепция оставалась все той же: каждому стилю задаются определенные свойства.

Использование таблиц CSS всегда вызывало определенные проблемы. Например, у верстальщиков часто возникали трудности с сортировкой и группировкой свойств, да и с наследованием не все так однозначно.

И вот наступили двухтысячные. Разметкой все чаще начали заниматься профессиональные фронтенд-разработчики, для которых важна была гибкая и динамическая работа со стилями. Существовавший на тот момент CSS требовал расстановки префиксов и отслеживания поддержки новых возможностей браузеров. Тогда специалисты по JavaScript и Ruby взялись за дело, создав препроцессоры - надстройки для CSS, добавляющие в него новые возможности.

CSS для начинающих: особенности препроцессоров

Они выполняют несколько функций:

• унифицируют браузерные префиксы и хаки;

• упрощают синтаксис;

• дают возможность работать с вложенными селекторами без ошибок;

• улучшают логику стилизации.

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

Видя популярность таких надстроек, в W3C начали постепенно добавлять возможности из них в код CSS. Например, так в спецификации появилась функция calc(), которая поддерживается многими браузерами. Ожидается, что в скором времени можно будет задавать переменные и создавать миксины. Однако это произойдет в далеком будущем, а препроцессоры уже здесь и уже отлично работают.

Популярные препроцессоры CSS. Sass

Разработан в 2007 году. Изначально являлся компонентом Haml - шаблонизатора HTML. Новые возможности по управлению элементами CSS пришлись по вкусу разработчикам на Ruby on Rails, которые начали распространять его повсеместно. В Sass появилось огромное количество возможностей, которые сейчас входят в любой препроцессор: переменные, вложение селекторов, миксины (тогда, однако, в них нельзя было добавлять аргументы).

Объявление переменных в Sass

Переменные объявляются с помощью знака $. В них можно сохранять свойства и их наборы, например: “$borderSolid: 1px solid red;”. В этом примере мы объявили переменную под названием borderSolid и сохранили в ней значение 1px solid red. Теперь, если в CSS нам потребуется создать красный border шириной в 1px, просто указывает эту переменную после названия свойства. После объявления переменные менять нельзя. Доступно несколько встроенных функций. Например, объявим переменную $redColor со значением #FF5050. Теперь в коде CSS, в свойствах какого-нибудь элемента, используем ее для задания цвета шрифта: p { color: $redColor; }. Хотите поэкспериментировать с цветом? Используйте функции darken или lighten. Это делается так: p { color: darken($redColor, 20%); }. В результате цвет redColor станет на 20 % светлее.

Вложенность

Раньше для обозначения вложенности приходилось использовать длинные и неудобные конструкции. Представим, что у нас есть div, в котором лежит p, а в нём, в свою очередь, расположен span. Для div нам нужно задать цвет шрифта red, для p - yellow, для span - pink. В обычном CSS это делалось бы следующим образом:

С помощью препроцессора CSS все делается проще и компактнее:

Элементы буквально «вкладываются» один в другой.

Директивы препроцессора

С помощью директивы @import можно импортировать файлы. Например, у нас есть файл fonts.sass, в котором объявлены стили для шрифтов. Подключаем его в основной файл style.sass: @import ‘fonts’. Готово! Вместо одного большого файла со стилями у нас есть несколько, которые можно использовать для быстрого и легкого доступа к требуемым свойствам.

Миксины

Одна из самых интересных задумок. Дает возможность одной строкой задавать целый набор свойств. Работают следующим образом:

@mixin largeFont {

font-family: ‘Times New Roman’;

font-size: 64px;

line-height: 80px;

font-weight: bold;

Чтобы применить миксин к элементу на странице, используем директиву @include. Например, мы хотим применить его к заголовку h1. Получается следующая конструкция: h1 { @include: largeFont; }

Все свойства из миксина будут присвоены элементу h1.

Препроцессор Less

Синтаксис Sass напоминает о программировании. Если вы ищете вариант, который больше подходит изучающим CSS для начинающих, обратите внимание на Less. Он был создан в 2009 году. Главная особенность - поддержка нативного так что незнакомым с программированием верстальщикам его будет проще освоить.

Переменные объявляются с помощью символа @. Например: @fontSize: 14px;. Вложенность работает по тем же принципам, что и в Sass. Миксины объявляются следующим образом: .largeFont() { font-family: ‘Times New Roman’; font-size: 64px; line-height: 80px; font-weight: bold; }. Для подключения не нужно использовать директивы препроцессоров - просто добавьте свежесозданный миксин в свойства выбранного элемента. Например: h1 { .largeFont; }.

Stylus

Еще один препроцессор. Создан в 2011 году тем же автором, что подарил миру Jade, Express и другие полезные продукты.

Переменные можно объявлять двумя способами - явно или неявно. Например: font = ‘Times New Roman’; - это неявный вариант. А вот $font = ‘Times New Roman’ - явный. Миксины объявляются и подключаются неявно. Синтаксис таков: redColor() color red. Теперь можем добавить его элементу, например: h1 redColor();.

На первый взгляд Stylus может показаться непонятным. Где «родные» скобки и точки с запятой? Но стоит только в него погрузиться, как все становится намного более ясным. Однако помните, что длительная разработка с этим препроцессором может «отучить» вас использовать классический синтаксис CSS. Это иногда вызывает проблемы при необходимости работать с «чистыми» стилями.

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

На самом деле это… не имеет значения. Все варианты предоставляют примерно одинаковые возможности, просто синтаксис у каждого разный. Рекомендуем действовать следующим образом:

• если вы - программист и хотите работать со стилями как с кодом, используйте Sass;
• если вы - верстальщик и хотите работать со стилями как с обычной версткой, обратите внимание на Less;
• если вы любите минимализм, воспользуйтесь Stylus.

Для всех вариантов доступно огромное количество интересных библиотек, способных еще сильнее упростить разработку. Пользователям Sass рекомендуется обратить внимание на Compass - мощный инструмент с множеством встроенных возможностей. Например, после его установки вам уже никогда не придется беспокоиться о вендорных префиксах. Упрощается работа с сетками. Имеются утилиты для работы с цветами, спрайтами. Доступен ряд уже объявленных миксинов. Уделите этому средству пару дней - тем самым вы сэкономите немало сил и времени в будущем.

И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с CSS , а мне говорят: "Все настоящие верстальщики уже давно перешли на препроцессоры. Ну какой чистый CSS в преддверии 2020 года!?" Что же делать?

Во-первых, разработчики никогда не перестанут придумывать новые технологии. А профессиональные верстальщики – премного им за это благодарны. Язык таблиц стилей CSS , придумали в то время, когда сайты были примитивными. Но шли годы, сайты становились сложнее и массивнее, но способы верстки оставались прежними. Верстальщики запарились писать похожие участки кода. Невозможно было быстро поменять цвет на сайте. Назрела необходимость в большей автоматизации верстки, так и появились препроцессоры CSS кода. И сегодня мы поговорим об одном из них, препроцессоре LESS .

Компиляция LESS и VS Code

Все что потребуется для компиляции LESS кода – это редактор кода VS Code и расширение Easy Less . Как это работает?

1. Создаем файл стилей c расширением .less
2. После сохранения, автоматически сгенерируется .css файл в ту же папку.

Каждый раз при сохранении изменений, LESS файлы компилируются в CSS файлы. Браузеры ещё не научились понимать LESS , им нужен CSS код.

Переменные LESS

Наиболее часто используемые свойства выносим в переменные. На сайте обычно используются повторяющиеся цвета и семейства шрифтов. Заносим все цвета в переменные и затем подставляем в правило не код цвета, а переменную. Вы спросите: "В чем прикол? Все равно мне нужно что-то прописывать, какая разница?"

Главная фишка - это быстрая замена цвета. Цвет меняется только один раз, в переменной. Замена цвета в одной переменной, заменит цвет на всех страницах сайта. Только одной этой фишки уже достаточно, чтобы начать использовать LESS . Объявляем переменные в LESS и сохраняем в них нужные нам значения, названия переменных даем осмысленные.

@primary: #194eb4;
@secondary: #f2b834;
@success: #4cb514;
@black: #000;
@white: #fff;

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

LESS

После сохранения, компилируется CSS код. Мы не трогаем вообще CSS файл, вся работа ведется в LESS файле. Вы можете заносить любые часто повторяющиеся свойства в переменные.

CSS

Миксины (mixin) в LESS

Миксины полезны для повторного использования набора свойств – рамок, кнопок, заголовков. Сгруппированный набор свойств, может применяться к разным селекторам.

На сайте несколько однотипных кнопок разного цвета, но с одинаковыми шрифтовыми свойствами. Создаем миксин, который помогает автоматизировать процесс создания кнопок.

Button_font {

text-transform: uppercase;
font-size: 18px;
}

Примешиваем миксин в свойства селектора кнопки.

Portfolio__button {
padding: 15px 80px;
color: #344258;
.button_font;
}

На выходе получаем:

Portfolio__button {
padding: 15px 80px;
color: #344258;
font-family: "DIN Pro Bold";
text-transform: uppercase;
font-size: 18px;
}

Символ амперсанд

Вместо дублирования названия селектора, используем символ амперсанд.

Portfolio__item {
position: relative;
background-color: #3c3c3c;
}
&:hover {
background-color: #ccc;
}
}

CSS

Медиа-запросы в LESS

Можно записывать медиа-запросы прямо внутри селектора.

LESS

CSS

Заключение

Эта статья не раскрывает и 25% всех возможностей, что предлагает LESS . Да это и не нужно, цель статьи – мотивация новичков начать использовать препроцессоры. Начиная с самого простого, постепенно двигаясь к более сложному.

26.07.2017

5 Лучших CSS препроцессоров 2017 года, которые ускорят ваш рабочий процесс.

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

Иными словами, CSS препроцессор - это дополнение к CSS с новыми функциями: переменными, расширениями, импортом и так далее.

В той статье я расскажу о лучших 5 CSS препроцессорах 2017 года.

01. Sass

SASS – это самый популярный препроцессор с огромным сообществом и мощным функционалом. Он работает только в совокупности с Ruby и очень прост в изучении. Большинство front-end фреймворков, таких как Bootstrap, Foundation и materialize, построены с использованием SASS.

SASS имеет два синтаксиса:

• .sass
• .scss

02. Stylus

Stylus – еще один отличный препроцессор для динамичного генерирования CSS. Если вы хотите опустить фигурные скобки, запятые и точки с запятой, то он может стать для вас лучшим выбором. Stylus работает на Node.js и очень прост в установке и использовании. В нем есть множество кастомных функций, например, saturation(). Вы также можете использовать все функции, предоставляемые другими лидирующими компиляторами.

03. Less

Less, который также известен как Less.js или Less CSS, – еще один лидирующий CSS препроцессор. Это отличный выбор, если вам нужны такие стандартные функции как переменные, вложенные стили и так далее. Эта Javascript библиотека была изначально написана на Ruby.

• Читайте также:

04. Stylecow

Stylecow – препроцессор, написанный на Node, который можно установить с помощью npm. У него мощный API, с помощью которого можно легко создавать плагины.

05. CSS-Crush

Препроцессор, построенный на PHP, который станет отличным вариантом для PHP-программистов, потому что он работает на многих платформах. CSS-Crush обладает всеми обычными функциями препроцессора (переменные, вложенные стили и т.д.)

Заключение

Если вы ищете лучший CSS препроцессор, то вы найдете великое множество различных вариантов в сети. На мой взгляд, наилучшие варианты для новичков – это SASS и Stylus.