» » Вибір препроцесора CSS

Вибір препроцесора CSS

Вибір препроцесора CSSCSS препроцесор (CSS preprocessor) - це надбудова над CSS, яка надає нові функції і можливості для CSS, за допомогою доданих синтаксичних конструкцій.

Мета препроцесорів : надання зручних синтаксичних конструкцій для веб-розробника, щоб спростити і прискорити розробку і підтримку стилів в проектах.

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

За допомогою препроцесорів Ваш написаний код стає: читабельним для людини, структурованим і логічним, продуктивним.

Серед найбільш популярних препроцесорів виділяють Less, Sass (Scss), Stylus . Також більш менш помітними інструментами в даній області є Closure Stylesheets, CSS Crush, вони менш популярні на даний момент, але все таки ними користуються деякі розробники. Спробуємо розібратися в можливостях і особливостях Less, Sass (Scss), Stylus.

Стандартне використання CSS досить складне. Синтаксис без вкладеності безпосередньо складний для зорового сприйняття. Відсутність нормальних змінних і функцій робить CSS-код вузькоспрямованим і з багатьма зайвими і не потрібними деталями.

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

Для більш просунутих користувачів є спеціальні збирачі проектів.
Вибір препроцесора CSS

Less - найбільш популярний і часто використовуваний препроцесор. Розроблено на основі javascript, включає базові можливості препроцесорів, але не надає умовних конструкцій і циклів в звичному для нас розумінні. Завдяки своїй простоті і лаконічності є стандартний для CSS синтаксис і можливість розширення функціоналу за рахунок функціонування полігонів.

LESS надає для CSS динамічні можливості: змінні, міксування(Mixins), операції і функції. Документація дуже дружелюбна для розробника, а синтаксис дуже схожий з чистим CSS. Популярні фреймворки, наприклад, Twitter Bootstrap, активно використовують динамічні функції LESS. Однак LESS дає можливість повторно використовувати класи в якості міксування в будь-якому місці таблиці стилів.
Вибір препроцесора CSS

Інший потужний і популярний препроцесор - Sass . Навколо даного інструменту утворилося величезне співтовариство розробників. Він заснований в 2007 році як модуль для HAML і написаний на Ruby (надає порт на C ++). Має широкий асортимент функцій, якщо порівнювати з Less. Препроцесор розширює свою функціональність за рахунок бібліотеки Compass, яка дає можливість вийти за рамки CSS і працювати більш масштабно. Надає два види синтаксису: Sass (Syntactically Awesome Style Sheets) простіший синтаксис CSS, в основі якого ідентація. Його вважають більш застарілою версією. Scss (Sassy CSS) в основі якого стандартний для CSS синтаксис.
Вибір препроцесора CSS

Stylus - досить молодий, але вже перспективний CSS-препроцесор. Розроблено ще в 2010 році. Багато хто вважає його зручним і розширюваним препроцесор, і більш гнучким ніж Sass. Розроблено на javascript. Є підтримка багатьох варіантів синтаксису від подібного CSS до більш простого і легкого.

Корисні інструменти для розробника:

1. CodeKit : робить компіляцію Sass, LESS і Stylus файлів, а потім автоматично перевантажує ваш веб-браузер, після поновлення файлів. У тому числі оптимізує зображення проекту для того, щоб підвищити продуктивність системи. Технологія платна, але є і тріальна версія для роботи.
LiveReload : робить перевірку змін у файлах, потім обробляє їх і автоматично перезавантажує веб-браузер. Версія працює для Mac і Windows.
2. Scout : Працює з Sass і Compass в середовищі Ruby. Працює для Mac і Windows.
SimpLESS : звичайний і простий LESS CSS компілятор для Mac і Windows.

Для того, щоб вибрати відповідний препроцесор для своєї роботи, спробуйте скористатися кількома. А за результатами тесту, Вам буде набагато легше зробити свій вибір. А також не забувайте про те, що при освоєнні препроцесора, Ви не вивчаєте нову мову, а тільки лише вивчаєте новий синтаксис і можливості. Компанія Hyper Host ™ бажає Вам приємної роботи в світі CSS!


200 02.12.16



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру