Препроцессор LESS, начиная с простого. Классы и идентификаторы
Современный CSS - мощь, а в комбинации с препроцессорами - вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете, как использовать миксины, переменные и директивы для ещё большего контроля над стилями.
Примечание Весь код Sass/SCSS компилируется в CSS, чтобы браузеры могли его понимать и корректно отображать. В настоящее время браузеры не поддерживают работу с Sass/SCSS или с любым другим препроцессором CSS напрямую, стандартная же спецификация CSS не предоставляет аналогичную функциональность.
Зачем использовать Sass/SCSS вместо CSS?
- Вложенность - SCSS позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам (а если речь идёт о Sass, то там и без скобок всё красиво и интуитивно понятно).
- Переменные - в стандартном CSS тоже есть понятие переменных, но в Sass с ними можно работать немного по-другому. Например, повторять их через директиву @for . Или генерировать свойства динамически. Подробнее можете изучить на русскоязычном сайте проекта.
- Улучшенные математические операции - можно складывать, вычитать, умножать и делить значения CSS. В отличие от стандартного CSS, Sass/SCSS позволяют обойтись без calc() .
- Тригонометрия - SCSS позволяет писать собственные (синусоидальные и косинусоидальные) функции, используя только синтаксис Sass/SCSS, подобно тому, как это можно делать в других языках вроде JavaScript.
- Директивы @for , @while и выражение @if-else - можно писать CSS-код, используя знакомые элементы из других языков. Но не обольщайтесь - в итоге на выходе будет обычный CSS.
- Миксины (примеси) - можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями. Миксины можно использовать для создания отдельных тем одного макета. Примеси также могут содержать целые CSS-правила или что-либо другое, разрешённое в Sass-документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.
- Функции - можно создавать определения 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;
Есть три помощника, которые намекнут на возможность деления:
- Значение (или любая его часть) хранится в переменной или возвращается функцией.
- Значения заключены в круглые скобки.
- Значение используется как часть другого арифметического выражения.
$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.
Появились вопросы?
Воплощение дизайнерского макета невозможно без использования HTML и CSS. Если язык разметки позволяет нам набросать шаблон из необходимых элементов, то CSS преобразует этот шаблон к нужному виду, как на исходнике. Казалось бы, с помощью чистого CSS можно сделать страницу такой, какой хотел видеть её заказчик.
Однако, если кто-то откроет ваш единственный CSS-файл и попытается что-то подправить, уверены ли вы, что код будет читаемым, редактируемым, структурированным и понятным? Если ваш проект огромен, состоит из множества частей, то уверены ли вы, что сможете с легкостью поддерживать его в будущем? Если использовать CSS-препроцессор, то ответ - да, к тому же это путь автоматизации верстки сайтов . Почему? Сейчас узнаем.
Что такое CSS-препроцессор?
В моем понимании, это надстройка над стандартным CSS, которая расширяет стандартные возможности, добавляет некоторые функции и позволяет писать более читаемый и удобный для понимания код. На выходе исходный код компилируется в привычный нам CSS. Использование подобного инструмента в современной разработке - “must have”, и я советую каждому верстальщику или разработчику ознакомиться с ним. Следует добавить, что есть с чего выбирать, ведь существует достаточно много CSS-препроцессоров, но следует выделить самые популярные:
- Stylus
Все вышеперечисленные препроцессоры имеют практически идентичный функционал, есть только небольшие различия в синтаксисе. Теперь, вернемся же к вопросу, озвученному ранее: какие преимущества дают нам препроцессоры, для того чтобы сделать наш код более удобным, и поддерживаемым? Это, прежде всего, вложенность. Такая особенность дает нам возможность структурировать элементы, с легкостью найти родителя элемента, быстро писать псевдоклассы и псевдоэлементы и даже использовать БЭМ! К примеру:
.track
color: #fff
&__title
paddding: 10px
&:hover, &:focus
color: blue
Посмотрите на этот фрагмент кода, написанный на Sass. Всё это преобразуется в следующий CSS:
Track { color: #FFF;}
.track__title { padding: 10px;}
.track__title:hover, .track-title:focus { color: blue}
Лаконично, удобно, понятно, структура от родителя до потомка - здорово, не так ли? Вторым, и не менее важным, преимуществом, являются переменные. Принцип работы их предельно прост: имя переменной начинается с символа $ , а дальше само имя. Через двоеточие пишем значение - это может быть цвет в любом удобном виде, значения отступа, ширины, размера шрифта и так далее. В итоге мы получим примерно следующее:
$btn-color: blue;
$font-main-size: 16px;
А использование будет выглядеть следующим образом:
Block {
font-size: $font-main-size;
}
Только представьте себе, как это удобно. Если вам нужно поменять цвет кнопок по всему сайту, то это достаточно сделать только в одном месте! Что же, идем дальше. Третье, и самое большое, что может нам предложить CSS-препроцессоров - это использования миксинов. В привычном для нас понимании, миксины - это функции, которые можно использовать несколько раз, не повторяя одни и те же части кода (помним об одном из принципов программирования - DRY - Don’t repeat yourself). Признаться честно, я не так часто использую миксины, видимо не было такой острой необходимости, однако несколько примеров я всё же покажу. Одна из самых используемых мной функций имеет следующий вид:
@function em($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return $pixels / $context * 1em;
}
А её применение имеет следующий вид:
body {
font-size: em(14px);
}
Да, как вы поняли, это всего лишь преобразование размера шрифта из PX в Em (да здравствует те времена, когда для такой мелочи раньше пользовались специальным сервисами или считали сами на калькуляторе). Следующий пример также позволяет сэкономить много времени:
@mixin input-placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}
Его использования:
input, textarea {
@include input-placeholder {
color: $grey;
}
}
Можно привести ещё множество примеров, однако, стоит начать использовать миксины самому, чтобы понять, насколько это полезный инструмент. Пожалуй, осталось ещё одна причина, которая заставит вас полюбить CSS-препроцессоры, и её имя - модульность. На дворе 2018 год, и модульность у нас повсюду - начиная от HTML-шаблонизаторов и заканчивая различными css фреймворками и сборщиками проектов.
Статья на NetTuts+, написанная Johnathan Croom в 2012 году.
Основная цель статьи - показать преимущество использования любого из трех описанных в ней препроцессоров Sass, LESS и Stylus. Обзор прекрасно подойдет для новичков, которые только открывают для себя эту грань веб-дизайна.
В этой статье мы рассмотрим преимущества и выгоды использования трех различных препроцессоров - Sass , LESS и Stylus .
Введение
Препроцессоры CSS были созданы с одной единственной целью - добавить стилевым таблицам CSS мощь и одновременную гибкость без нарушения кросс-браузерности. Все препроцессоры компилируют созданный с помощью их синтаксиса код в стандартный CSS-код, который понимает и использует любой браузер, каким бы древним он (браузер ) не был.
Существуют множество преимуществ, которые привносят препроцессоры в таблицы стилей CSS и в этой статье мы рассмотрим только некоторые из них, как хорошо известные, так и мало распространенные. Давайте приступим к обзору.
Синтаксис
Наиболее важной частью при написании кода в любом препроцессоре CSS является его синтаксис. В счастью для нас, синтаксис всех трех препроцессоров, которые мы будем рассматривать, имеют CSS-подобный вид.
Sass & LESS
Оба препроцессора Sass и LESS имеют стандартный CSS-синтаксис. Это делает задачу конвертирования уже существующего CSS-кода в синтаксис любого из этих препроцессоров простой и быстрой. Sass использует для своих файлов расширение
| 1 | .scss |
| 1 | .less |
Вид обычного файла в синтаксисе Sass или LESS представлен ниже:
/* style.scss или style.less */ h1 { color : #0982c1 ; }Хорошо видно, что это обычный синтаксис CSS, который прекрасно конвертируется в Sass (SCSS) или LESS.
Важно обратить внимание, что Sass (SCSS) также имеет старую версию синтаксиса Sass, в которой опущены точки с запятой и фигурные скобки.
Несмотря на то, что такой синтаксис все еще можно применять на практике, он является устаревшим и мы не будем использовать его в наших примерах.
Синтаксис Sass (старая версия ) выглядит следующим образом:
/* style.sass */ h1 color : 0982c1Stylus
Для своих файлов этот препроцессор использует расширение
| 1 | .styl |
Примеры синтаксиса Stylus:
/* CSS-подобный синтаксис */ h1 { color : #0982C1 ; } /* опущены фигурные скобки */ h1 color : #0982C1 ; /* опущены фигурные скобки, двоеточия и точки с запятой */ h1 color #0982C1Все варианты синтаксиса, показанные выше, являются валидными и в результате компиляции получается правильный CSS-код. Например, такой код скомпилируется в стандартный CSS без ошибок:
h1 { color #0982c1 } h2 font-size : 1 .2emПеременные
В препроцессорах переменные объявляются и используются внутри файлов стилей CSS. Переменные могут принимать любое значение, допустимое в CSS (цвет, число или текст) и может ссылаться из любого места CSS-документа.
Sass
В препроцессоре Sass переменная объявляется с помощью символа
| 1 | $ |
LESS
Переменные в LESS точно такие же, как и в Sass, за исключением того, что перед именем переменной ставится символ
| 1 | @ |
Stylus
Переменные в Stylus не нуждаются ни в каком знаке для своего объявления, но, тем не менее, могут использовать символ
, но при вызове этой переменной в коде подстановки значения переменной не происходит.Другими словами, не выполняется такая операция:
mainColor = #0982c1 siteWidth = 1024px $ borderStyle = dotted body color mainColor border 1px $ borderStyle mainColor max-width siteWidthСкомпилированный CSS
Каждый из представленных в виде примера файлов компилируется в точно такой же CSS-код. Вы можете включить воображение, чтобы представить, насколько полезными могут быть переменные.
Благодаря им отпадает необходимость задавать значение цвета и потом двадцать раз повторять его в CSS-коде. Или же поставлена задача изменить ширину сайта и для этого необходимо “перерыть” код в поисках этой величины.
Ниже представлен CSS-код после выполнения компиляции:
body { color : #0982c1 ; border : 1px dotted #0982c1 ; max-width : 1024px ; }Вложенность (nesting)
Если в коде CSS поставлена задача обратиться одновременно к нескольким элементам, имеющим одного и того же родителя, то писать снова и снова этого родителя - занятие утомительное.
Например, так:
Вместо этого, используя возможности препроцессора, мы можем поместить все дочерние селекторы внутри скобок элемента-родителя. Кроме того, символ
| 1 | & |
Sass, LESS & Stylus
Все три препроцессора имеют абсолютно одинаковый синтаксис для вложенных селекторов:
section { margin : 10px ; nav { height : 25px ; a { color : #0982C1 ; &:hover { text-decoration : underline ; } } } }Скомпилированный CSS
Ниже показан скомпилированный в CSS результат кода, представленного выше. Сравните с тем кодом, который мы писали в самом начале - абсолютно одинаково. Но какое удобство при использовании преимуществ препроцессора!
section { margin : 10px ; } section nav { height : 25px ; } section nav a { color : #0982C1 ; } section nav a :hover { text-decoration : underline ; }Подмешивания (mixins)
| 1 | mixins |
Применение подмешиваний особенно оправдывает себя при создании специфичных стилей для элементов или простановке браузерных префиксов. Когда миксин вызывается внутри CSS-селектора, происходит распознавание аргументов этого миксина, затем его стили применяются к селектору, который его вызвал.
Прим. переводчика: в приведенных ниже примерах стоит обратить внимание на разницу в синтаксисе объявления и вызова миксина внутри CSS-селектора для всех трех препроцессоров.
Sass
/* Sass mixin по имени error с аргументом $borderWidth, значение которого по умолчанию равно 2px */ @mixin error ($ borderWidth : 2px ) { border : $ borderWidth solid #F00 ; color : #F00 ; } .generic-error { padding : 20px ; margin : 4px ; @include error(); } .login-error { left : 12px ; position : absolute ; top : 20px ; @include error(5px); }LESS
/* LESS mixin по имени error с аргументом $borderWidth, значение которого по умолчанию равно 2px */ .error (@borderWidth : 2px ) { border : @ borderWidth solid #F00 ; color : #F00 ; } .generic-error { padding : 20px ; margin : 4px ; .error(); /* Подключается миксин по имени error */ } .login-error { left : 12px ; position : absolute ; top : 20px ; .error(5px); /* Подключается миксин по имени error со значением аргумента $borderWidth, равным 5px; то есть происходит переопределение значения аргумента */ }Style
/* Stylus mixin по имени error с аргументом $borderWidth, значение которого по умолчанию равно 2px */ error (borderWidth = 2px ) { border : borderWidth solid #F00 ; color : #F00 ; } .generic-error { padding : 20px ; margin : 4px ; error(); /* Подключается миксин по имени error */ } .login-error { left : 12px ; position : absolute ; top : 20px ; error(5px); /* Подключается миксин по имени error со значением аргумента $borderWidth, равным 5px; то есть происходит переопределение значения аргумента */ }Скомпилированный CSS
Результатом компиляции из всех трех препроцессоров будет одинаковый CSS-код:
.generic-error { padding : 20px ; margin : 4px ; border : 2px solid #f00 ; color : #f00 ; } .login-error { left : 12px ; position : absolute ; top : 20px ; border : 5px solid #f00 ; color : #f00 ; }Наследование (inheritance)
При написании CSS стилей “классическим” способом, для того чтобы применить одни и те же свойства к нескольким элементам в HTML-документе, нам следовало бы создать такой код:
p , ul , ol { /* какие-то стили здесь */ }Все работает прекрасно. Но если потребуется написать стили отдельно для любого из этих селекторов, нужно будет создавать отдельные правила для каждого из них. И сразу же код таблиц стилей становиться неряшливым и трудно поддерживаемым.
В противоположность этому применяются наследование. Наследование - это возможность для одних CSS-селекторов наследовать свойства у другого селектора.
Прим. переводчика: обратите внимание на одинаковый синтаксис подключения (объявления) наследования внутри CSS-селектора с помощью директивы
.
1 @extend
Sass & Stylus
.block { margin : 10px 5px ; padding : 2px ; } p { @extend .block; border : 1px solid #EEE ; } ul , ol { @extend .block; /* Наследовать свойства у селектора класса.block */Скомпилированный CSS
.block , p , ul , ol { margin : 10px 5px ; padding : 2px ; } p { border : 1px solid #EEE ; } ul , ol { color : #333 ; text-transform : uppercase ; }LESS
Препроцессор LESS не поддерживает наследование в полной мере так, как это организовано в Sass или Stylus. Вместо добавления множественных селекторов в один набор свойств, наследование трактуется как миксин без аргументов.
Импорт стилей выполняется для каждого селектора. Обратной стороной такого подхода является постоянное повторение строк со свойствами в компилированном CSS-стиле.
Вот как может выглядеть LESS-код с наследованием:
.block { margin : 10px 5px ; padding : 2px ; } p { .block; border : 1px solid #EEE ; } ul , ol { .block; /* Наследование свойств у селектора класса.block */ color : #333 ; text-transform : uppercase ; }Скомпилированный CSS
.block { margin : 10px 5px ; padding : 2px ; } p { margin : 10px 5px ; padding : 2px ; border : 1px solid #EEE ; } ul , ol { margin : 10px 5px ; padding : 2px ; color : #333 ; text-transform : uppercase ; }Как хорошо видно из кода, стили класса
.Импортирование
В CSS-сообществе к импортированию стилей с помощью директивы
| 1 | @import |
В любом из трех препроцессоров импортирование одного файла внутрь другого фактически приводит к вставке кода одного файла в другой при компиляции, в результате которой получается один CSS-файл.
Прим. переводчика: другими словами, в препроцессорах импортирование необходимо для компиляции одного файла из нескольких. В стандартном CSS импортирование приводит к подстановке одного кода внутрь другого.
Обратите внимание, что при компилировании файла со стандартным подключением с помощью директивы
| 1 | @import "file.css" |
Скомпилированный CSS
@import "reset.css" ; body { background : #EEE ; } p { background : #0982C1 ; }Функции работы с цветом
“Цветовые” функции созданы для трансформации цвета при компиляции. Такие функции чрезвычайно полезны при создании градиентов, затемнения цвета при
| 1 | hover |
Sass
lighten ($ color , 10 %); darken ($ color , 10 %); saturate ($ color , 10 %); desaturate ($ color , 10 %); grayscale ($ color ); /* возвращает шкалу полутонов цвета $color */ complement ($ color ); /* returns complement color of $color */ invert ($ color ); /* возвращает инвертированный цвет от $color */ mix ($ color1 , $ color2 , 50 %);Представленный выше код является всего лишь кратким списком функций работы с цветом в Sass. Полный список всех доступных функций расположен по адресу Sass Documentation .
“Цветовые” функции могут использоваться везде, где требуется работа с цветов в коде. Простой пример - объявлена переменная с цветом, к которой дальше в коде применяется функция затемнения цвета
| 1 | darken |
LESS
lighten (@color , 10% ); /* возвращает цвет на 10% светлее чем $color */ darken (@color , 10% ); /* возвращает цвет на 10% темнее чем $color */ saturate (@color , 10% ); /* возвращает цвет на 10% более насыщенный чем $color */ /* возвращает цвет на 10% менее насыщенный чем $color */ spin (@color , 10 ); /* возвращает цвет, смещенный на 10 градусов вправо относительно цвета @color */ spin (@color , -10 ); /* возвращает цвет, смещенный на 10 градусов влево относительно цвета @color */ mix (@color1 , @ color2 ); /* возвращает результат смешивания цвета $color1 с цветом $color2 */Список функций препроцессора LESS находится на официальном сайте проекта LESS Documentation .
Ниже показан пример того, как можно применять “цветовые” функции в LESS:
@color : #0982C1 ; h1 { background : @ color ; border : 3px solid darken (@ color , 50% ); }Stylus
lighten (@color , 10% ); /* возвращает цвет на 10% светлее чем $color */ darken (@color , 10% ); /* возвращает цвет на 10% темнее чем $color */ saturate (@color , 10% ); /* возвращает цвет на 10% более насыщенный чем $color */ desaturate (@color , 10% ); /* возвращает цвет на 10% менее насыщенный чем $color */Полный список всех функций работы с цветом препроцессора Stylus представлен на сайте проекта Stylus Documentation .
И пример использования “цветовой” функции в Stylus:
color = #0982C1 h1 background color border 3px solid darken (color , 50 %)Арифметические операции
Благодаря препроцессорам выполнение арифметических операций внутри CSS-кода теперь осуществляется просто и легко. Такая возможность часто бывает полезной.
Прим. переводчика: стоит упомянуть о функции из CSS3 по имени
, которая также позволяет выполнять внутри CSS-кода простые арифметические операции.
1 calc()
Sass, LESS & Stylus
body { margin : (14px / 2 ); top : 50px + 100px ; right : 100px - 50px ; left : 10 * 10 ; }Практические примеры
Вот мы и рассмотрели основные моменты того, что и как умеют делать все три препроцессора. Однако мы еще ни разу не коснулись момента практического применения этих возможностей. Ниже показан список реальных веб-приложений, в которых используются препроцессоры, заметно улучшая при этом весь код.
Браузерные префиксы
Одним из наиболее ярких примеров преимущества использования препроцессоров является написание с их помощью свойств с браузерными префиксами. Один раз создав миксин с поддержкой браузерных префиксов, мы избавляем себя от рутинной работы.
Например, создадим для всех трех препроцессоров миксин скругления углов блока:
Sass
@mixin border-radius ($ values ) { -webkit-border-radius : $ values ; -moz-border-radius : $ values ; border-radius : $ values ; } div { @include border-radius(10px); }LESS
.border-radius (@values ) { -webkit-border-radius : @ values ; -moz-border-radius : @ values ; border-radius : @ values ; } div { .border-radius(10px); }Stylus
border-radius (values ) { -webkit-border-radius : values ; -moz-border-radius : values ; border-radius : values ; } div { border-radius(10px); }Скомпилированный CSS
div { -webkit-border-radius : 10px ; -moz-border-radius : 10px ; border-radius : 10px ; }Трехмерный текст
Создание эффекта трехмерности для текста с помощью CSS-свойства
| 1 | text-shadow |
Используя миксины и функции для работы с цветом, мы можем создать объемный текст и изменять его цвет на лету:
Sass
@mixin text3d ($ color ) { color : $ color ; text-shadow : 1px 1px 0px darken ($ color , 5% ), 2px 2px 0px darken ($ color , 10% ), 3px 3px 0px darken ($ color , 15% ), 4px 4px 0px darken ($ color , 20% ), 4px 4px 2px #000 ; } h1 { font-size : 32pt ; @include text3d(#0982c1); }LESS
.text3d (@color ) { color : @ color ; text-shadow : 1px 1px 0px darken (@ color , 5% ), 2px 2px 0px darken (@ color , 10% ), 3px 3px 0px darken (@ color , 15% ), 4px 4px 0px darken (@ color , 20% ), 4px 4px 2px #000 ; } span { font-size : 32pt ; .text3d(#0982c1); }Stylus
text3d (color ) color : color text-shadow : 1px 1px 0px darken (color , 5 %), 2px 2px 0px darken (color , 10 %), 3px 3px 0px darken (color , 15 %), 4px 4px 0px darken (color , 20 %), 4px 4px 2px #000 span font-size : 32pt text3d (#0982c1 )В примере для Stylus я выбрал вариант написания свойства
| 1 | text-shadow |
Скомпилированный CSS
span { font-size : 32pt ; color : #0982c1 ; text-shadow : 1px 1px 0px #097bb7 , 2px 2px 0px #0875ae , 3px 3px 0px #086fa4 , 4px 4px 0px #07689a , 4px 4px 2px #000 ; }Колонки
Использование переменных и числовых значений для этих переменных пришла мне в голову, когда я только начал знакомиться с возможностями CSS-препроцессоров. Объявление ширины для макета внутри переменной делает задачу изменения этой ширины (при необходимости ) простой и быстрой:
Sass
$ siteWidth : 1024px ; $ gutterWidth : 20px ; $ sidebarWidth : 300px ; body { margin : 0 auto ; width : $ siteWidth ; } .content { float : left ; width : $ siteWidth - ($ sidebarWidth +$ gutterWidth ); } .sidebar { float : left ; margin-left : $ gutterWidth ; width : $ sidebarWidth ; }LESS
@siteWidth : 1024px ; @gutterWidth : 20px ; @sidebarWidth : 300px ; body { margin : 0 auto ; width : @ siteWidth ; } .content { float : left ; width : @ siteWidth - (@ sidebarWidth +@ gutterWidth ); } .sidebar { float : left ; margin-left : @ gutterWidth ; width : @ sidebarWidth ; }Stylus
siteWidth = 1024px ; gutterWidth = 20px ; sidebarWidth = 300px ; body { margin : 0 auto ; width : siteWidth ; } .content { float : left ; width : siteWidth - (sidebarWidth + gutterWidth ); } .sidebar { float : left ; margin-left : gutterWidth ; width : sidebarWidth ; }Скомпилированный CSS
body { margin : 0 auto ; width : 1024px ; } .content { float : left ; width : 704px ; } .sidebar { float : left ; margin-left : 20px ; width : 300px ; }Некоторые уловки препроцессоров
Существует несколько хитростей при работе с CSS-препроцессорами. В этой статье я расскажу только о некоторой части из них. Но если эта тема вас заинтересовала, я рекомендую вам внимательно прочитать официальную документацию или же, что еще лучше, просто начните пользоваться препроцессором каждый день в процессе кодинга.
Сообщение об ошибках
Если вы уже пишите код на CSS достаточно давно, то наверняка сталкивались с ситуацией, когда внутри кода закралась ошибка, которую вы никак не можете найти. Если вы попадали в точно такую же ситуацию, то могу вас обрадовать - существует способ решить такую задачу.
CSS-препроцессоры могут сообщать об ошибках в коде и заставить их поступать таким образом достаточно просто. В этом случае препроцессор сам сообщает вам, в каком месте CSS-кода находиться ошибка (и все счастливы ).
Если вас заинтересовала подобная возможность во всех трех препроцессорах, то в этой статье подробно описано, как выполнить данную настройку.
От автора: о препроцессорах css говорят уже давно. Многие разработчики уже применяют их в разработке своих проектов. Есть и такие, кто слышал о препроцессорах или читал про них, но не понимает, какие преимущества дают препроцессоры при написании css кода.
Для многих препроцессоры – это «секретная» технология, преимущества которой весьма условны и неочевидны. В данной статье я расскажу простым языком о том, что такое препроцессоры, для чего они нужны и как они могут помочь веб-разработчику.
Что это такое CSS препроцессоры?
CSS препроцессор - это надстройка над CSS, которая расширяет возможности для стандартного CSS, с помощью новых синтаксических конструкций.
То есть это не «революционная сверхтехнология». Это то, что расширяет возможности css. Это то, что может автоматизировать рутинные ежедневные операции и ускорить разработку.
Препроцессоры преобразуют код, написанный на препроцессорном языке, в чистый и валидный CSS-код. И на выходе мы получаем чистый, валидный, кроссбраузерный код. Схема работы с препроцессорами можно посмотреть ниже.
Как препроцессоры жизнь упрощают?
Препроцессоры позволяют ускорить написание css-кода и упрощают его поддержку в будущем.
Рассмотрим пример. На сайте используется красный шрифт. Используя чистый css, вам приходится задавать этот цвет много раз для каждого элемента в отдельности. И если вы решите со временем поменять оттенок красного — вам нужно будет его изменять для каждого элемента. Используя препроцессоры, цвет 1 раз присваивается переменной и уже эта переменная прописывается для каждого элемента. Если вы решите поменять оттенок цвета на этот раз, вам нужно будет поменять его только в одном месте.
Подобный пример встречается достаточно часто. И, как я отмечал в начале, преимуществ использования препроцессоров в этом примере не много. В любом редакторе кода мы можем нажать сочетание клавиш «ctrl»+”F”, найти код цвета «#ff0000» и заменить его на «#00ff00». И цвет поменяется с красного на зеленый во всех местах за один клик мыши.
Так в чем же реально нам могут помочь препроцессоры?
Какие проблемы решают препроцессоры?
Препроцессоры экономят наше время и делают многие рутинные вещи за нас благодаря таким особенностям как: вложенные селекторы, математические функции, ссылки на родительский селектор и даже сообщения об ошибках, которые говорят нам, где и почему произошла ошибка в коде.
Давайте посмотрим, как это все нам может помочь на реальных примерах:
В больших или очень старых проектах, которые постоянно дополняются и усовершенствуются, стили css могут изменяться достаточно часто. И если файл стилей содержит тысячи строк кода, то очень неудобно вносить css правки. Было бы гораздо удобнее, если бы стили были разбиты на логические блоки, и каждый такой блок стилей находился бы в отдельном файле.
Эту проблему препроцессоры решают без каких-либо усилий с вашей стороны. У вас может быть несколько препроцессорных файлов от вашего проекта, которые после компиляции автоматически склеятся, и на выходе вы получите один «красивый» css файл.
Еще одной проблемой css является дублирование стилей и селекторов. По мере развития проекта появляются какие-то снипиты, которые можно использовать повторно. Так же может появиться масса однообразных селекторов отличающихся лишь немного. В итоге если мы переместили блок или переименовали класс какого-то блока нужно отредактировать еще массу селекторов.
Данную проблему в препроцессорах решают миксины. Миксины – это параметризованные или нет функции, которые выдают тот или иной CSS, который мы можем многократно использовать там, где нужно.
Следующая проблема – проблема зависимостей. Например, у вас в стилях задана ширина блока, от нее зависят другие параметры, отступы для других блоков и т.д. Для того чтобы корректно поменять один параметр, придутся подправлять все, зависящие от него.
Эту проблему очень просто решают переменные в препроцессорах.
Кроме всего перечисленного при использовании препроцессоров вы полностью исключаете риск получить ошибку в css файле, получаете более чистый, логичный и кроссбраузерный css.
Преимущества препроцессоров
Исходя из трудностей верстки, с которыми помогают справиться препроцессоры можно назвать следующие преимущества препроцессоров: использование переменных, вложенность, миксины (mixins), наследование и так далее, и так далее – это все понятно. Но больше всего я хочу обратить ваше внимание на то, что знания препроцессоров открывают перед вами возможность найти высокооплачиваемую работу, сделать скачок вверх по карьерной лестнице, увеличить ваш заработок минимум в два раза.
Давайте посмотрим, какие зарплаты предлагают веб-студии верстальщикам без знания препроцессоров на сайте hh.ru :
А вот зарплаты, которые предлагают веб-студии верстальщикам со знаниями препроцессоров на том же сайте:
Как вы можете заметить максимальная оплата труда без знаний препроцессоров и минимальная оплата со знаниями препроцессоров, отличаются в 1,5 раза. А если посмотреть по средним цифрам, то оплата отличается минимум в 2 – 3 раза!
Причем, что еще можно заметить, для этого не нужно знать все препроцессоры. Достаточно знать два самых популярных препроцессора – Sass и Less.
Вывод
Препроцессроы действительно упрощают жизнь разработчику, могут решить быстро повседневные проблемы верстальщика и взять на себя выполнение ежедневных рутинных операций.
Лучше знать препроцессоры и ими не каждый день пользоваться, или пользоваться по необходимости. Чем не знать препроцессоры и упустить интересный высокооплачиваемый проект или возможность перейти на более высокооплачиваемую работу.
P.S. Используете ли вы препроцессоры в разработке? Напишите в комментариях, какие препроцесслоры вы используете? Если пока не используете, то почему? Планируете ли начать использовать препроцессоры?
Видео презентация курса «Препроцессоры Sass и Less. Автоматизация и упрощение Front-end разработки»
