Stylus – знайомство з препроцесором
Корисні статті про верстку для верстальників
Грудень 27, 2014
Настав час познайомитись із препроцесором Stylus. Нижче наводжу переклад статті від David Walsh, присвячену маловідомому, але дуже корисному препроцесору Stylus. Оригінал статті розміщений тут - Getting Started with Stylus
У середовищі web-розробників можна часто і постійно чути лише про два препроцесори: Sass і LESS. Однак існує ще один препроцесор, про який чути зовсім не так часто - це Stylus. За редизайном Mozilla Developer Network мною був обраний Stylus з кількох причин:
Установка Stylus
Препроцесор Stylus є Open Source проектом, розташованим на GitHub, тому його можна легко встановити як із вихідних файлів, так і за допомогою менеджера пакетів npm:
CSS-файли, створені за допомогою синтаксису Stylus, повинні мати розширення .styl і можуть бути розміщені в будь-якому місці проекту. Препроцесор Stylus не має конфігураційного файлу, для початку компіляції достатньо запустити утиліту командного рядка stylus з мінімальним набором ключів:
Представлена вище команда виконує компіляцію вихідного stylus-файлу main.styl директорію /dist з тим самим ім'ям main.styl . Іншими словами, файл main.styl компілюється у файл main.css і поміщається в директорію /dist.
Утиліта stylus може запускатися як для одноразової компіляції, а й відстежувати зміни файлів, виконуючи компіляцію на лету; для цього є ключ --watch:
Як можна здогадатися, програма stylus має набагато більше опцій, з повним списком яких можна ознайомитися тут - Executable. Зокрема, за допомогою потрібних ключів можна виконувати зворотну конвертацію з CSS в Stylus, порівнювати введення/виведення і багато чогоінше.
Але приступимо до розгляду найголовнішого, заради чого і затівався цей переклад - синтаксису та можливостям препроцесора Stylus
Основи синтаксису Stylus
Синтаксис Stylus дуже нагадує синтаксис інших препроцессорів (Sass чи LESS). Але давайте детальніше розглянемо, що він із себе представляє на ділі:
У принципі, нічого нового у сказаному вище немає - всі ці моменти також існують в інших препроцесорах. Якщо раптом у синтаксисі не дістає дужок, двокрапок або ком, їх можна сміливо додавати в код - препроцесор Stylus вас чудово зрозуміє і в цьому випадку.
Створення та використання міксинів
Міксини надзвичайно корисні з кількох причин. Завдяки їм під час написання стилів на CSS можна використовувати логіку, і навіть структурувати код.
Створення міксинів у Stylus є простим завданням, а синтаксис міксинів саме таким, яким і очікувалося побачити:
При створенні міксинів під Stylus можна встановити значення за промовчанням для аргументів:
Міксин може повертати значення, що обчислюється, за допомогою ключового слова return або ж повертати стилі, визначені всередині самого міксину. Такі стилі можна застосувати до елемента, що викликає цей міксин:
І звичайно ж, усередині міксинів можна використовувати умови (втім, як і в будь-якому іншому місці коду на Stylus):
Представлений вище міксин генерує grid на основі мінімального значення (мінімальної ширини стовпця), максимального значення (максимальної ширини стовпця) та кількості стовпців (яке змінюється за допомогою інкременту). Останній аргумент return-dimension служить для вказівки того, чи міксин просто повертатиме отримане значення, не створюючи CSS-класів.
Корисні міксини Stylus
При роботі надпроектом MDN мені знадобилася велика кількість корисних міксинів під Stylus, наприклад, як підтримка RTL, підтримка локалізації, а також підтримка великого числа браузерів. Нижче я представлю деякі з цих міксинів - можливо, вони знадобляться на практиці деяким читачам.
Обнулення last child
Цей міксин був створений для обнулення порожнього простору в останнього елемента-батька. Як правило, такими просторами CSS є padding-bottom і margin-bottom .
За допомогою цього міксину встановлюється margin або padding для блоку-батька. А потім просто забирається порожній простір у останнього елемента цього блоку.
Стилізація placeholder
Стилізація placeholder є досить хитрою задачею через необхідність використання вендорних префіксів, тому використання міксину значно спрощує це завдання:
Висновок
На цьому переклад закінчено.
Від себе можу додати.
Під Sublime Text 3 є плагін Stylus для підсвічування синтаксису та автоматичної табуляції. Якщо планується подальша робота в Stylus, то даний плагін є обов'язковим до встановлення - без нього просто важко і довго кодувати.
Плагін Emmet має підтримку синтаксису Stylus (мене Emmet не перестає тішити). Всі гарячі клавіші Emmet залишилися незмінними і під Stylus, ніби я кодив у старому доброму CSS.