Russian (Pусский) translation by Liliya (you can also view the original English article)
Использование действительной мощности препроцессора CSS - это приключение. Есть бесчисленные языки, синтаксисы и функции, готовые к использованию прямо сейчас.
В этой статье мы рассмотрим различные функции и преимущества использования трех разных препроцессоров: Sass, LESS и Stylus.
Вступление
Препроцессоры создают CSS, который работает во всех браузерах.
Препроцессоры CSS3 - это языки, написанные с единственной целью добавления классных, изобретательных функций в CSS без нарушения совместимости браузера. Они делают это, компилируя код, который мы пишем, в обычный CSS, который можно использовать в любом браузере, вплоть до возвращения в каменный век. Есть тысячи функций, которые препроцессоры приносят в таблицу, и в этой статье мы рассмотрим некоторые известные и некоторые не известные. Давайте начнем.
Синтаксих
Наиболее важной частью написания кода в препроцессоре CSS является понимание синтаксиса. К счастью для нас, синтаксис (или может быть) идентичен регулярному CSS для всех трех препроцессоров.
Sass & LESS
Sass и LESS используют стандартный синтаксис CSS. Это упрощает преобразование существующего файла CSS в препроцессор. Sass использует расширение .scss
, а LESS использует расширение .less
. Базовый файл Sass или LESS можно настроить следующим образом:
/* style.scss or style.less */ h1 { color: #0982C1; }
Как вы могли заметить, это просто обычный CSS, который отлично компилируется как в Sass, так и в LESS.
Важно отметить, что Sass также имеет более старый синтаксис, который пропускает точки с запятой и фигурные скобки. Хотя это все еще используют, оно устарело, и мы не будем использовать его в этом примере. Синтаксис использует расширение .sass
и выглядит так:
/* style.sass */ h1 color: #0982c1
Stylus
Синтаксис для Stylus более подробный. Используя расширение файла .styl
, Stylus принимает стандартный синтаксис CSS, но также принимает некоторые другие варианты, в которых скобки, двоеточия и полуколоны являются необязательными. Пример:
/* style.styl */ h1 { color: #0982C1; } /* omit brackets */ h1 color: #0982C1; /* omit colons and semi-colons */ h1 color #0982C1
Использование разных вариаций в одной таблице стилей также является допустимым, поэтому следующее будет компилироваться без ошибок.
h1 { color #0982c1 } h2 font-size: 1.2em
Переменные
Переменные могут быть объявлены и использованы во всей таблице стилей. Они могут иметь любое значение, которое является значением CSS (например, цветами, числами [включенными единицами] или текстом.), и на них можно ссылаться везде в нашей таблице стилей.
Sass
Переменные Sass добавляются с символом $
, а значение и имя разделяются точкой с запятой, как и свойство CSS.
$mainColor: #0982c1; $siteWidth: 1024px; $borderStyle: dotted; body { color: $mainColor; border: 1px $borderStyle $mainColor; max-width: $siteWidth; }
LESS
LESS переменные точно такие же, как переменные Sass, за исключением того, что имена переменных добавляются символом @
@mainColor: #0982c1; @siteWidth: 1024px; @borderStyle: dotted; body { color: @mainColor; border: 1px @borderStyle @mainColor; max-width: @siteWidth; }
Stylus
Переменные Stylus не требуют, чтобы что-то было добавлено к ним, хотя оно допускает символ $
. Как всегда, конечная точка с запятой не требуется, но знак равенства между значением и переменной есть. Следует отметить, что Stylus (0.22.4) компилируется, если мы добавим символ @
к имени переменной, но не будем применять значение при ссылке. Другими словами, не делайте этого.
mainColor = #0982c1 siteWidth = 1024px $borderStyle = dotted body color mainColor border 1px $borderStyle mainColor max-width siteWidth
Скомпилированный CSS
Каждый из вышеуказанных файлов будет скомпилирован с тем же CSS. Вы можете использовать свое воображение, чтобы узнать, насколько полезны переменные. Нам больше не нужно будет менять один цвет и повторить его двадцать раз, или мы хотим изменить ширину нашего сайта и вынуждены его искать, чтобы найти его. Вот CSS после компиляции:
body { color: #0982c1; border: 1px dotted #0982c1; max-width: 1024px; }
Nesting
Если нам нужно ссылаться на несколько элементов с одним и тем же источником в нашем CSS, это может быть утомительно писать его снова и снова.
section { margin: 10px; } section nav { height: 25px; } section nav a { color: #0982C1; } section nav a:hover { text-decoration: underline; }
Вместо этого, используя препроцессор, мы можем записать дочерние селекторы внутри скобок родителя. Кроме того, символ &
обозначает родительский селектор.
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
Mixins - это функции, которые позволяют повторно использовать свойства во всей нашей таблице стилей. Вместо того, чтобы идти по всей нашей таблице стилей и менять свойство несколько раз, теперь мы можем просто изменить его внутри нашего mixin. Это может быть действительно полезно для конкретного стиля элементов и префиксов поставщиков. Когда mixins вызывается из селектора CSS, аргументы mixin распознаются, а стили внутри mixin применяются к селектору.
Sass
/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */ @mixin error($borderWidth: 2px) { border: $borderWidth solid #F00; color: #F00; } .generic-error { padding: 20px; margin: 4px; @include error(); /* Applies styles from mixin error */ } .login-error { left: 12px; position: absolute; top: 20px; @include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/ }
LESS
/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */ .error(@borderWidth: 2px) { border: @borderWidth solid #F00; color: #F00; } .generic-error { padding: 20px; margin: 4px; .error(); /* Applies styles from mixin error */ } .login-error { left: 12px; position: absolute; top: 20px; .error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */ }
Stylus
/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */ error(borderWidth= 2px) { border: borderWidth solid #F00; color: #F00; } .generic-error { padding: 20px; margin: 4px; error(); /* Applies styles from mixin error */ } .login-error { left: 12px; position: absolute; top: 20px; error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */ }
Скомпилированный 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; }
Наследственность
При написании CSS старомодным способом мы могли бы использовать следующий код для одновременного применения одних и тех же стилей к нескольким элементам:
p, ul, ol { /* styles here */ }
Это отлично работает, но если нам нужно дополнительно стилизовать элементы по отдельности, для каждого из них должен быть создан другой селектор, и он может быстро стать более беспорядочным и сложным в обслуживании. Чтобы противостоять этому, можно использовать наследие. Наследие - это способность других селекторов CSS наследовать свойства другого селектора.
Sass & Stylus
.block { margin: 10px 5px; padding: 2px; } p { @extend .block; /* Inherit styles from '.block' */ border: 1px solid #EEE; } ul, ol { @extend .block; /* Inherit styles from '.block' */ color: #333; text-transform: uppercase; }
Скомпилированный CSS (Sass & Stylus)
.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. Вместо добавления нескольких селекторов к одному набору свойств он рассматривает наследование как mixin без аргументов и импортирует стили в свои собственные селекторы. Недостатком этого является то, что свойства повторяются в вашей скомпилированной таблице стилей. Вот как вы его настроили:
.block { margin: 10px 5px; padding: 2px; } p { .block; /* Inherit styles from '.block' */ border: 1px solid #EEE; } ul, ol { .block; /* Inherit styles from '.block' */ color: #333; text-transform: uppercase; }
Скомпилированный CSS (LESS)
.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; }
Как вы можете видеть, стили из .block
были вставлены в селектора, которые мы хотели бы наследовать. Важно отметить, что приоритет может стать проблемой здесь, поэтому будьте осторожны.
Импортирующий
В сообществе CSS импорт CSS не одобряется, поскольку ему требуется несколько HTTP-запросов. Однако импорт с препроцессором работает по-разному. Если вы импортируете файл из любого из трех препроцессоров, он будет буквально включать импорт во время компиляции, создавая только один файл. Имейте в виду, что импортирование обычных файлов .css
компилируется по умолчанию с помощью @import «file.css»;
code. Кроме того, mixins и переменные могут быть импортированы и использованы в вашей основной таблице стилей. Импорт делает создание отдельных файлов для организации очень хорошо.
Sass, LESS, и Stylus
/* file.{type} */ body { background: #EEE; }
@import "reset.css"; @import "file.{type}"; p { background: #0982C1; }
Скомпилированный CSS
@import "reset.css"; body { background: #EEE; } p { background: #0982C1; }
Цветовые возможности
Цветовые функции встроены в функции, которые преобразуют цвет при компиляции. Это может быть чрезвычайно полезно для создания градиентов, более темных цветов и многое другое.
Sass
lighten($color, 10%); /* returns a color 10% lighter than $color */ darken($color, 10%); /* returns a color 10% darker than $color */ saturate($color, 10%); /* returns a color 10% more saturated than $color */ desaturate($color, 10%); /* returns a color 10% less saturated than $color */ grayscale($color); /* returns grayscale of $color */ complement($color); /* returns complement color of $color */ invert($color); /* returns inverted color of $color */ mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% */
Это всего лишь короткий список доступных цветовых функций в Sass, полный список доступных цветовых функций Sass можно найти, прочитав документацию Sass.
Цветовые функции можно использовать в любом месте, где используется цвет. Вот пример:
$color: #0982C1; h1 { background: $color; border: 3px solid darken($color, 50%); }
LESS
lighten(@color, 10%); /* returns a color 10% lighter than @color */ darken(@color, 10%); /* returns a color 10% darker than @color */ saturate(@color, 10%); /* returns a color 10% more saturated than @color */ desaturate(@color, 10%); /* returns a color 10% less saturated than @color */ spin(@color, 10); /* returns a color with a 10 degree larger in hue than @color */ spin(@color, -10); /* returns a color with a 10 degree smaller hue than @color */ mix(@color1, @color2); /* return a mix of @color1 and @color2 */
Список всех функций LESS можно найти, прочитав LESS Документацию.
Вот пример использования цветовой функции в LESS:
@color: #0982C1; h1 { background: @color; border: 3px solid darken(@color, 50%); }
Stylus
lighten(color, 10%); /* returns a color 10% lighter than 'color' */ darken(color, 10%); /* returns a color 10% darker than 'color' */ saturate(color, 10%); /* returns a color 10% more saturated than 'color' */ desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */
Полный список всех функций цвета Stylus можно найти, прочитав Документацию Stylus.
Вот пример использования цветовых функций Stylus:
color = #0982C1 h1 background color border 3px solid darken(color, 50%)
Эксплуатация
Выполнение математики в CSS очень полезно и теперь вполне возможно. Это просто, и вот как это сделать:
Sass, LESS, и Stylus
body { margin: (14px/2); top: 50px + 100px; right: 100px - 50px; left: 10 * 10; }
Практическое применение
Мы рассмотрели множество возможностей и новых возможностей, которые могут выполнять препроцессоры, но мы не затронули практику. Вот краткий список приложений реального мира, где использование препроцессора - спасатель.
Приставка поставщиков
Это одна из раздутых причин использовать препроцессор и по очень веской причине - это экономит массу времени и слез. Создание mixin для обработки префиксов поставщиков это легко и экономит много повторений и болезненного редактирования. Вот как это сделать:
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; }
3D-текст
Подделка 3D-текста с использованием нескольких текстовых теней
- умная идея. Единственная проблема в изменении цвета когда факт трудный и громоздкий. Используя mixins и цветовые функции, мы можем создавать 3D-текст и менять цвет «на лету»!
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 на одной строке, потому что я опустил фигурные скобки.
Скомпилированный 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 любой комментарий с двойной косой чертой удаляется (например, // комментарий
) и сохраняется любой комментарий косой черты (например, /* comment */
). При этом используйте двойную косую черту для комментариев, которые вы хотите на не скомпилированной стороне, и слэш-звездочкой для комментариев, которые вы хотите видеть после компиляции.
Просто примечание: если вы компилируете minified, все комментарии удаляются.
Заключение
Каждый препроцессор CSS, который мы рассмотрели (Sass, LESS и Stylus), имеет свой собственный уникальный способ выполнения той же задачи, предоставляя разработчикам возможность использовать полезные неподдерживаемые функции, сохраняя при этом совместимость браузера и чистоту кода.
Хотя это не требование для разработки, препроцессоры могут сэкономить много времени и иметь некоторые очень полезные функции.
Я призываю всех вас попробовать как можно больше препроцессоров, чтобы вы могли эффективно выбирать фаворита и знать, почему его предпочитают другие. Если вы еще не пытались использовать препроцессор для написания CSS, я настоятельно рекомендую вам попробовать.
У вас есть любимая функция препроцессора CSS, о которой я не упоминал? Есть ли что-то, что можно сделать иначе? Дайте нам знать в комментариях ниже!
Особая благодарность Karissa Smith, супер-талантливому другу, которая создала миниатюру для этой статьи.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post