CC BY
58УДК: 004.4'23
Ворожейкин Р. В.
студент гр. И-1-12,
ГБОУВО РК «Крымский инженерно-педагогический университет»
Абляев М. Р.
студент гр. И-1-12,
ГБОУВО РК «Крымский инженерно-педагогический университет»
Аметов Ф. Р.
студент гр. И-1-12,
ГБОУВО РК «Крымский инженерно-педагогический университет»
Научный руководитель: Сейдаметов Г.С.
ГБОУВО РК «Крымский инженерно-педагогический университет»
ОБЗОР И ПРЕИМУЩЕСТВА ИСПОЛЬЗОВАНИЯ CSS ПРЕПРОЦЕССОРОВ
В работе описаны преимущества и недостатки использование CSS препроцессоров при разработке проектов. Рассматривается понятие CSS препроцессора, проблемы текущего синтаксиса CSS. Проведен анализ наиболее популярных CSS препроцессоров: Less, Sass и Stylus. Описаны преимущества их использования, особенности синтаксиса и дополнительные возможности данных препроцессоров.
Ключевые слова: CSS, препроцессоры, Less, Sass, Stylus, стили.
При создании сайта, разработчики часто используют дополнительные фреймворки, библиотеки, надстройки для упрощения процесса разработки сайта. В настоящее время существует несколько очень популярных CSS препроцессоров, которые облегчают написание стилей сайта. Например, не требуется ввод фигурных скобок, двоеточия, точек с запятой и простых скобок. Также препроцессоры добавляют определенные функциональные возможности к стандартному CSS.
Публикаций и различных научных исследований на тему CSS препроцессоров существует немного. Это связано с тем, что сама идея и реализация CSS препроцессоров очень похожа, а для понимания данной темы достаточно прочтения документации либо подробного руководства. В одном из таких руководств [1] автор описывает смысл использования препроцессоров, приводит пример их использования и указывает на проблемы текущего CSS, которые и привели к созданию CSS препроцессоров.
Автор следующего руководства [2] также описывает CSS препроцессоры. Но в данном руководстве рассматриваются три наиболее популярных препроцессора, а именно Less, Sass и Stylus. В данной статье описываются особенности синтаксиса. Например, в каком препроцессоре исключена необходимость ввода двоеточия, скобок, кавычек, точек с запятой. Также описаны дополнительные функциональные возможности, а именно добавление переменных, наследования, использование функций для работы с цветом, импорт стилей и многое другое. Все это приводится в качестве сравнительного анализа данных препроцессоров. Каждая особенность синтаксиса и добавленного функционала рассматривается отдельно у каждого препроцессора на примере кода и краткого описания.
Целью статьи является описание наиболее популярных CSS препроцессоров, указание преимуществ и недостатков их использования.
CSS препроцессорами называются надстройки над CSS. Данные надстройки добавляют раннее недоступные возможности в CSS.
Основной задачей CSS препроцессоров является предоставление удобных синтаксических конструкций для разработчика с целью упростить, а, следовательно, ускорить разработку и поддержку стилей в проектах.
CSS препроцессоры преобразуют код, написанный с использованием препроцессоров, в чистый CSS-код.
Использование препроцессоров дает ряд преимуществ написанного кода в сравнении с чистым CSS:
- читабельность для человека;
- структурированность;
- производительность;
- логичность.
На данный момент, наиболее популярными CSS препроцессорами являются: Less, Sass, Stylus. Также существует ряд других, менее популярных, препроцессоров, например Closure Stylesheets или CSS Crush.
Порог вхождения в CSS препроцессоры, при владении на среднем уровне знаниями стандартного CSS, является весьма низким. Все популярные препроцессоры имеют хорошие документации и огромное количество материала о примерах использования данных препроцессоров.
Для использования препроцессоров необходимо установить программу, которая будет отслеживать изменения в файлах, предназначенных для препроцессора, и при выявленных изменениях компилировать содержимое этих файлов в чистый CSS-код.
Также при разработке крупных проектов и использовании в разработке препроцессоров стоит использовать сборщики проектов. Они предоставляют полный контроль процесса сборки CSS-кода и расширенные настройки.
Препроцессор Less написан на JavaScript. Less дополняет CSS динамическими функциями: переменными, примешиваниями, операциями, функциями. Синтаксис Less очень похож на CSS и имеет очень удобную документацию.
Less предоставляет возможность использовать переменные. Для обозначения переменной перед её названием необходимо поставить @, а после названия — двоеточие. Пример использования переменных в Less: @color: #f6f6f6; #footer {
color: @color;
} p {
color: @color;
}
После компиляции в CSS, данный код примет вид: #footer {
color: #f6f6f6;
} p {
color: #f6f6f6;
}
Примеси дают возможность вставлять набор свойств из одного набора правил в другой. Это осуществляется при помощи включения имени класса в качестве одного из свойств другого класса. Также примеси могут принимать аргументы. В целом, примеси упрощают изменение кода, делают его понятнее и яснее. Пример использование примесей в Less: @borders-radius (@rad: 2px) {
-webkit-border-radius: @radius; -moz-border-radius: @radius;
border-radius: @radius;
}
#slider {
.borders-radius;
}
#menu {
.rounded-corners(5px);
}
Данный Less-код будет скомпилирован в следующий CSS-файл: #slider {
-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}
#menu {
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
CSS поддерживает логическое каскадирование, но один блок кода в другой вложен быть не может. Препроцессор Less предоставляет возможность вложить один селектор в другой.
Пример вложенных правил: #menu {
h1 {
color: #f7f7f7; font-size: 18px;
}
ul { width: 50%;
li { list-style: none;
&:hover { background-color: e8e8e8;}
}
}
}
Данный Less код будет преобразован в следующий CSS-файл: #menu h1 { color: #f7f7f7;
font-size: 18px;
}
#menu ul {
width: 50%;
}
#menu ul li {
list-style: none;
}
#menu ul li:hover {
background-color: e8e8e8;
}
Less предоставляет возможность использовать операции и функции. При помощи операций можно складывать, делить, вычитать и умножать значения свойств и цветов. Это можно использовать для реализации сложных отношений между различными свойствами: @border-size: 1px; @custom-color: #222222; @blue: #459345;
#menu {
color: @custom-color*3; border-top: @border-size; border-bottom: @border-size*3;
}
#slider {
border-left: @border-size*2; border-color: desaturate(@red, 10%);
}
Данный Less будет скомпилирован в следующий CSS-файл: #menu {
color: #666666; border-top: 1px; border-bottom: 3px;
}
#slider {
border-left: 2px; border-color: $2457ff;
}
Препроцессор Sass отличается отсутствием фигурных скобок, в нем вложенные элементы реализованы с помощью отступов. Так же отсутствует обязательная необходимость в точке с запятой в конце.
Как и Less, Sass предоставляет возможность использование переменных. Но при небольшом отличие — перед названием переменной ставится не @, а $. Пример вложенных правил в Sass: #menu
font-size: 14px .success
border 1px solid #ff33ff
a
text-transform uppercase &:hover
color #fefefe Данный Sass-код будет скомпилирован в следующий CSS: #menu {
font-size: 14px;
}
#menu .success {
border: 1px solid #ff33ff;
}
#menu a {
text-transform: uppercase;
}
#menu a:hover {
color: #fefefe;
}
Stylus — это самый молодой, но при этом самый перспективный препроцессор. Написан на JavaScript. В Stylus не требуется ввод фигурных скобок, двоеточия, точек с запятой и простых скобок, но при этом ввод данных символов не запрещен. В отличие от Sass и Less, Stylus не требует указывать какой-либо символ перед названиями переменных.
Так же Stylus не заставляет использовать какой-либо один вариант синтаксиса. То есть в одном файле .styl можно использовать как и стандартный CSS синтаксис, так и синтаксис без необходимости в указании фигурных скобок, двоеточия и точки с запятой.
Stylus включает в себя определенное количество функций для работы с цветами, такие
как:
• lighten (color, 20%) — вернет цвет на 20% светлее чем 'color';
• darkner (color, 20%) — вернет цвет на 20% темнее чем 'color';
• saturate (color, 20%) — вернет цвет на 20% насыщеннее, чем 'color';
• desaturate (color, 20%) — вернет цвет на 20% менее насыщенный, чем 'color'. Каждый из рассмотренных препроцессоров имеет свой уникальный подход к
решению одной и той же задачи. Выбор препроцессора должен основываться от поставленных задач и личных желаний разработчика. Для этого и был проведен краткий обзор данных препроцессоров в данной статье.
Литература
1. CSS препроцессоры [Электронный ресурс]. — 2016. — Режим доступа: https://mrmlnc.gitbooks.io/less-guidebook-for-beginners/content/chapter_1/css-reprocessors.html.
2. Sass vs. Less vs. Stylus [Электронный ресурс]. — 2016. — Режим доступа: http://forwebdev.ru/css/sass-vs-less-vs-stylus/.
