Препроцесори
Препроцесінг, постпроцесінг, зборка
Препроцесори отримують на вхід файл, написаний спеціальною мовою, перетворюють його в файли html, css, js.
Постпроцесори отримують html, css, js файли і модифікують їх, оптимізують, добавляють певні конструкції.
Зборщики займаються керуванням препроцесінгу, постпроцесінгу, контролюють версії файлів, залежності. Популярні зборщики: webpack, gulp, grunt.
Препроцесори
Препроцесори в першу чергу з'явилися через недосконалість та надлишковість мов розмітки та програмування.
Наведіть недоліки html, css, js.
Суть роботи препроцесора: отримати файл, написаний згідно зі стандартів оформлення коду для даного препроцесора і створити з нього повноцінний файл стилів, html, js.
В своїй більшості препроцесори - це окремі програми чи плагіни до IDE, які потрібно встановлювати окремо (чи вони йдуть в комплекті потужних IDE).
Як правило, після кожної зміни файлів препроцесор повинен зкомпілювати нові файли. Для зручності можна налаштувати IDE щоб препроцесор проводив компіляцію файлів автоматично при втраті фокуса чи збереженні файлів.
Типові препроцесори:
- html: Haml, Pug (ex Jade)
- CSS: Less, Sass (Scss), Stylus
- JS: CoffeScript, Dart
Постпроцесори
Раніше в CSS потрібно було добавляти багато вендорних префіксів (в часи переходу від CSS2 до CSS3). Розробник писав тільки один стиль, а постпроцесор добавляв префікси, що пришвидшувало розробку і берегло нерви:
.box { border-radius: 5px; }
.button { background: linear-gradient(to bottom, #1e5799,#7db9e8); }
Даний код постпроцесор перетворював у:
.box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.button {
background: #1e5799;
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -ms-linear-gradient(to top, #1e5799 0%, #7db9e8 100%);
background: -o-linear-gradient(to top, #1e5799 0%, #7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
Також постпроцесори можуть реформатувати, мініфікувати, проводити обфускацію коду та робити інші корисні зміни.
Наразі функція реформатування є у більшості IDE, мініфікація та обфускація проводиться зборщиком, префіксів залишилося дуже мало (user-select, flex), тому постпроцесори зараз вже не популярні.
Препроцесори HTML
Pug (ex Jade), Haml - найпопулярніші препроцесори для коду HTML.
З появою Emmet кодити стало значно простіше, тому зараз html-препроцесори використовуються не часто.
Їх синтактис майже однаковий. Приклад коду:
section
#news
.newitem.first
h3 Заголовок новини
p.date 26 жовтня 2016 р.
p Текст новини
section
article
input[name="text"][value="Hello"]
...
У даних препроцесорах важливу роль грають відступи (таби чи пробіли на початку строки). Саме відступи регулюють вкладення тегів один в один, помилка з відступами призведе або до помилки компіляції, або до невірної розмітки.
Після компіляції буде створено такий HTML-код:
<section>
<div id="news">
<div class="newitem first">
<h3>Заголовок новини</h3>
<p class="date">26 жовтня 2016 р.</p>
<p>Текст новини</p>
</div>
</div>
</section>
<section>
<article></article>
<input name="text" value="Hello">
...
CoffeeScript
CoffeeScript - препроцесор для JavaScript. Код для цього препроцесора схожий на Ruby, Python, Haskel, тому спеціалістам, що пишуть на цих мовах, coffee-код читати простіше.
Код для цього препроцесора в деяких моментах значно коротший за аналоги на JS.
Є онлайн-конвертор js2.coffee для перетворення JS в Coffeescript.
Java - марка кави, тому етимологічно JavaScript і CoffeeScript є досить близькими.
Препроцесори CSS
Препроцесори стилів стали популярні з тої причини, що мова стилів CSS занадто громіздка, багато коду в стилях повторюється, відсутня явна ієрархічність.
Препроцесори пропонують:
- чітку ієрархію стилів;
- використання змінних;
- міксіни - підмішування стилів;
- математичний модуль.
Найбільш популярні препроцесори: Less, SCSS/SASS, Stylus.
SASS2 для Ruby і Stylus мають спрощений синтаксис, ієрархію визначають відступи, не потрібні двокрапка, крапка з комою, фігурні лапки:
body
background-color: background
> a
color: lightblue
&:visited
color: navy
&.big
font-size: 115%
.box
padding: 8px 16px
p
margin-bottom: 12px
Препроцесори Less та SCSS більш близькі до звичайного CSS. Звичайний CSS-файл задовільняє всім умовам коду цих препроцесорів.
Препроцесор Less найпростіше підключити в свій проект. Цей препроцесор може працювати в декількох режимах: прекомпіляція, компіляція на льоту і компіляція на стороні клієнта.
Розглянемо останній варіант. В проект підключається скипт less.js, після завантаження він переглядає в заголовку теги
<link type="text/less" rel="stylesheet" href="css/styles.less">
і компілює з них звичайні CSS-файли. Зверніть увагу на атрибут type.
Ієрархія
Проілюструємо використання ієрархії наступним прикадом:
CSS:
header nav.center.clear {
text-align: center;
}
header nav.center.clear li {
list-style: none;
}
header nav.center.clear li a {
color: blue;
}
header nav.center.clear li a:hover {
color: navy;
}
header nav.center.clear li.active a {
color: red;
}
@media screen and (max-width: 740px) {
header nav.center.clear {
text-align: left;
}
}
У коді препроцесора це буде виглядати так:
Less:
header nav.center.clear {
text-align: center;
@media screen and (max-width: 740px) {
text-align: left;
}
li {
list-style: none;
a {
color: blue;
&:hover {
color: navy;
}
}
&.active a {
color: red;
}
}
}
SASS2:
header nav.center.clear
text-align: center
@media screen and (max-width: 740px)
text-align: left
li
list-style: none
a
color: blue
&:hover
color: navy
&.active a
color: red
По методології BEM ієрархія стилів доволі слабка, рідко використовуються селектори з декількома аргументами, здебільшого стилі описують конкретні класи.
Але складні імена класів успішно можна оптимізувати за допомогою препроцесорів:
.box {
&-button {
&__red {
color: white;
background: red;
}
}
}
// буде створено такі стилі:
.box-button__red {
color: white;
background: red;
}
Змінні
Всі препроцесори підтримують змінні. В Less вони задаються і використовуються таким чином:
@main-font: Georgia, Verdana, serif;
@blue: #0022CC;
@column: 4px 20px;
h1, h2, h3, h4 {
font-family: @main-font;
}
.large {
margin: @column;
font-family:@main-font;
color: @blue;
}
.slogan {
padding: @column;
border: 1px solid @blue;
}
Міксіни, примішування:
В стилях часто буває, що деякий набір стилів доводиться задавати багатьом селекторам. Міксіни дозволяють спростити цю задачу:
.column {
margin: 0 20px;
padding: 4px 16px;
border: 1px solid #ccc;
border-radius: 6px;
}
.avatar {
background: silver;
.column;
}
.info {
.column;
border-radius: 10px;
}
Можна використовувати параметри:
.class1(@aaa: 10px) {
margin: 0 @aaa;
padding: @aaa;
}
.avtar {
.class1;
}
.avatar-big {
.class1(16px);
}
.class2(@a: 6px, @x: 20px, @y: 20px) {
.class1(@a);
left: @x;
top: @y;
}
.inf {
.class2(24px, 40px);
}
Використання класу з пустим параметром дозволить не створювати цей клас в CSS:
.class1() {
margin: 0 10px;
padding: 4px 20px;
}
.avtar {
.class1;
}
Результат не буде містити селектора .class1:
.avtar {
margin: 0 10px;
padding: 4px 20px;
}
Математичний модуль
Звичайні матиматичні дії:
.a(@b) {
padding: @b @b + 8px;
}
.ccc {
width: 20% - 8px;
}
Функції:
ceil() - округлення в більшу сторону
floor() - округлення в меншу сторону
round() - звичайне округлення
percentage() - перетворення дробного значення в проценти
Тригонометрія:
sin(value)
cos(value)
tan(value)
asin(value)
acos(value)
atan(value)
Модуль числа, модуль між числами:
abs(value)
mod(valueOne, valueTwo)
Пошук мінімального і максимального значень:
min(list) // min(1, 14, 19, 0.3)
max(list) // max(1%, 10%, 4%, 8%)
Робота зі степенями:
sqrt(value)
pow(value, power)
Математичні константи:
pi()
Робота з кольором:
Отримати складову кольору:
red(color)
green(color)
blue(color)
Світліше, темніше:
lighten(color, 10%)
darken(color, 20%)
Зміна тону: spin(color, -45) // задається кут обертання по кольоровій палітрі
Змішування кольорів:
mix(color1, color2)
mix(color1, color2, 20%) // процентне змішування, 20% першого кольору + 80% другого
Забрати кольори:
grayscale(color, 1) // повністю градації сірого
grayscale(color, 0.5)
grayscale(color, 0.1) // майже не зміняться кольори
Контраст:
contrast(color)
Домашнє завдання
- Зробіть стилі проекту Minecraft за допомогою Less або Sass (останній входить до складу Node.js, можете встановити собі цю платформу).
- Намагайтесь використовувати препроцесори у ваших наступних проектах.
Руководство по LESS для новичков