Препроцессор CSS: обзор, выбор, применение. Альтернативы экранирования текста

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

Цель препроцессоров : предоставление удобных синтаксических конструкций для веб-разработчика, чтобы упростить и ускорить разработку и поддержку стилей в проектах.

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

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

Среди наиболее популярных препроцессоров выделяют Less, Sass (Scss), Stylus . Также более менее заметными инструментами в данной области являются Closure Stylesheets, CSS Crush, они менее популярны на данный момент, но все таки ими пользуются некоторые разработчики. Попробуем разобраться в возможностях и особенностях Less, Sass (Scss), Stylus.

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

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

Для более продвинутых пользователей есть специальные сборщики проектов.

Less – наиболее популярный и часто используемый препроцессор. Разработан на основе JavaScript, включает базовые возможности препроцессоров, но не предоставляет условных конструкций и циклов в привычном для нас понимании. Благодаря своей простоте и лаконичности имеется стандартный для CSS синтаксис и возможность расширения функционала за счёт функционирования плагинов.

LESS предоставляет для CSS динамические возможности: переменные, примешивания (Mixins), операции и функции. Документация очень дружелюбная для разработчика, а синтаксис очень схож с чистым CSS. Популярные фреймворки, например, Twitter Bootstrap, активно используют динамические функции LESS. Однако LESS дает возможность повторно использовать классы в качестве примешиваний в любом месте таблицы стилей.

Другой мощный и популярный препроцессор – Sass . Вокруг данного инструмента образовалось огромное сообщество разработчиков. Он основан в 2007 году как модуль для HAML и написан на Ruby (предоставляет порт на C++). Имеет широкий ассортимент функций, если сравнивать с Less. Препроцессор расширяет свою функциональность за счёт библиотеки Compass, которая дает возможность выйти за рамки CSS и работать более масштабно. Предоставляет два вида синтаксиса: Sass (Syntactically Awesome Style Sheets) более простой синтаксис CSS, в основе которого идентация. Его считают более устаревшей версией. Scss (Sassy CSS) в основе которого стандартный для CSS синтаксис.

– довольно молодой, но уже перспективный CSS-препроцессор. Разработан еще в 2010 году. Многие считают его удобным и расширяемым препроцессор, и более гибким чем Sass. Разработан на JavaScript. Есть поддержка многих вариантов синтаксиса от подобного CSS до более простого и легкого.

Полезные инструменты для разработчика:

• CodeKit : делает компиляцию Sass, LESS и Stylus файлов, а затем автоматически перегружает ваш веб-браузер, после обновления файлов. В том числе оптимизирует изображения проекта для того, чтобы повысить производительность системы. Технология платна, но есть и триальная версия для работы.
• LiveReload : делает проверку изменений в файлах, потом обрабатывает их и автоматически перезагружает веб-браузер. Версия работает для Mac и Windows.
• Scout : Работает с Sass и Compass в среде Ruby. Работает для Mac и Windows.
• SimpLESS : обычный и простой LESS CSS компилятор для Mac и Windows.

Для того, чтобы выбрать по.дходящий препроцессор для своей работы, попробуйте воспользоваться несколькими. А по результатам теста, Вам будет намного легче сделать свой выбор. А также не забывайте о том, что при освоении препроцессора, Вы не изучаете новый язык, а только лишь изучаете новый синтаксис и возможности. Компания ™ желает Вам приятной работы в мире CSS!

2545 раз(а) 1 Сегодня просмотрено раз(а)

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

Амперсанд

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

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

Результат компиляции 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).

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

p { font-size: 10px + 2em; // ОШИБКА! font-size: 10px + 6px; // 16px font-size: 10px + 2; // 12px }

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

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

Умножение

Выполняется точно так же, как в 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() ..

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.

И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с 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

div {
padding: 0;

color: @black;
}

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

CSS

div {
padding: 0;
font-family: Roboto, sans-serif;
color: #000;
}

Миксины (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

.portfolio__item {
position: relative;
background-color: #3c3c3c;
}
.portfolio__item:hover {
background-color: #ccc;
}

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

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

LESS

.header__title {
color: #344258;
font-size: 40px;

padding: 0 20px;
@media only screen and (max-width: 320px){
font-size: 22px;
}
}

CSS

.header__title {
color: #344258;
font-size: 40px;
font-family: "DIN Pro", sans-serif;
padding: 0 20px;
}
@media only screen and (max-width: 320px) {
.header__title {
font-size: 22px;
}
}

Заключение

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