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

Щоб краще зрозуміти особливості цієї технології, ненадовго поринемо в історію розвитку візуального представлення веб-сторінок.

Коли тільки-но почалося масове застосування інтернету, ніяких таблиць стилів не існувало. Оформлення документів залежало лише від браузерів. У кожному їх були свої стилі, які використовувалися для обробки певних тегів. Відповідно, сторінки виглядали по-різному, залежно від того, в якому браузері ви їх відкривали. Результат – хаос, плутанина, проблеми для розробників.

1994 року норвезький вчений Хокон Лі розробив таблицю стилів, яка могла використовуватися для оформлення зовнішнього виглядусторінки окремо від HTML-документа. Ідея сподобалася представникам консорціуму W3C, які відразу взялися за її доопрацювання. Через кілька років побачила світ перша версія специфікації CSS. Потім вона постійно вдосконалювалася, доопрацьовувалась... Але концепція залишалася все тією самою: кожному стилю задаються певні властивості.

Використання таблиць CSSзавжди викликало певні проблеми. Наприклад, у верстальщиків часто виникали труднощі з сортуванням та угрупованням властивостей, та й з успадкуванням не все однозначно.

І ось настали двотисячні. Розміткою все частіше почали займатися професійні фронтенд-розробники, для яких важлива була гнучка динамічна роботаіз стилями. CSS, що існував на той момент, вимагав розстановки префіксів і відстеження підтримки нових можливостей браузерів. Тоді фахівці з JavaScript і Ruby взялися за справу, створивши препроцесори - надбудови для CSS, які додають нові можливості.

CSS для початківців: особливості препроцесорів

Вони виконують кілька функцій:

• уніфікують браузерні префікси та хакі;

• спрощують синтаксис;

• дають можливість працювати із вкладеними селекторами без помилок;

• покращують логіку стилізації.

Коротко: препроцесор додає у можливості CSS логіку програмування. p align="justify"> Тепер стилізація виконується не звичайним перерахуванням стилів, а за допомогою декількох простих прийомів і підходів: змінних, функцій, міксинів, циклів, умов. Також з'явилася можливість застосовувати математику.

Бачачи популярність таких надбудов, 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 потужний інструментз безліччю вбудованих можливостей. Наприклад, після його встановлення вам вже ніколи не доведеться турбуватися про вендорні префікси. Спрощується робота із сітками. Є утиліти для роботи з квітами, спрайтами. Доступний ряд оголошених міксинів. Приділіть цьому засобу пару днів – тим самим ви заощадите чимало сил та часу в майбутньому.

Постали питання?

Втілення дизайнерського макета неможливе без використання 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:фокус ( 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 фреймворками та збирачами проектів.