Stylus - знайомство з препроцесором - Zencoder
December 27, 2014
Настав час познайомитись із препроцесором Stylus. Нижче наводжу переклад статті від David Walsh, присвячену маловідомому, але дуже корисному препроцесору Stylus. Оригінал статті розміщений тут - Getting Started with Stylus
У середовищі web-розробників можна часто і постійно чути лише про два препроцесори: Sass і LESS. Однак існує ще один препроцесор, про який чути зовсім не так часто - це Stylus. За редизайном Mozilla Developer Network мною був обраний Stylus з кількох причин:
Установка Stylus
Препроцесор Stylus є Open Source проектом, розташованим на GitHub, тому його можна легко встановити як із вихідних файлів, так і за допомогою менеджера пакетів:
CSS-файли, створені за допомогою синтаксису Stylus, повинні мати розширення та можуть розташовуватись у будь-якому місці проекту. Препроцесор Stylus не має конфігураційного файлу, для початку компіляції достатньо запустити утиліту командного рядка з мінімальним набором ключів:
Представлена вище команда виконує компіляцію вихідного stylus-файлу в директорію з тим самим ім'ям . Іншими словами, файл компілюється у файл і поміщається до директорії .
Утиліта може запускатися як для одноразової компіляції, а й відстежувати зміни файлів, виконуючи компіляцію на лету; для цього є ключ:
Як можна здогадатися, програма має набагато більше опцій, з повним списком яких можна ознайомитися тут - Executable. Зокрема, за допомогою потрібних ключів можна виконувати зворотну конвертацію з CSS в Stylus, порівнювати введення висновок і багато іншого.
Але приступимо до розгляду найголовнішого, заради чого і затівався цей переклад- синтаксису та можливостям препроцесора Stylus
Основи синтаксису Stylus
Синтаксис Stylus дуже нагадує синтаксис інших препроцессорів (Sass чи LESS). Але давайте детальніше розглянемо, що він із себе представляє на ділі:
У принципі, нічого нового у сказаному вище немає - всі ці моменти також існують в інших препроцесорах. Якщо раптом у синтаксисі не дістає дужок, двокрапок або ком, їх можна сміливо додавати в код - препроцесор Stylus вас чудово зрозуміє і в цьому випадку.
Створення та використання міксинів
Міксини надзвичайно корисні з кількох причин. Завдяки їм під час написання стилів на CSS можна використовувати логіку, і навіть структурувати код.
Створення міксинів у Stylus є простим завданням, а синтаксис міксинів саме таким, яким і очікувалося побачити:
При створенні міксинів під Stylus можна встановити значення за промовчанням для аргументів:
Міксин може повертати значення, що обчислюється, за допомогою ключового слова або ж повертати стилі, визначені всередині самого міксину. Такі стилі можна застосувати до елемента, що викликає цей міксин:
І звичайно ж, усередині міксинів можна використовувати умови (втім, як і в будь-якому іншому місці коду на Stylus):
Представлений вище міксин генерує grid на основі мінімального значення (мінімальної ширини стовпця), максимального значення (максимальної ширини стовпця) та кількості стовпців (яке змінюється за допомогою інкременту). Останній аргумент return-dimension служить для вказівки того, чи міксин просто повертатиме отримане значення, не створюючи CSS-класів.
Корисні міксини Stylus
При роботі над проектом MDN мені знадобилася велика кількість корисних міксинів під Stylus, наприклад таких, якпідтримка RTL, підтримка локалізації, а також підтримка великої кількості браузерів. Нижче я представлю деякі з цих міксинів - можливо, вони знадобляться на практиці деяким читачам.
Обнулення last child
Цей міксин був створений для обнулення порожнього простору в останнього елемента-батька. Як правило, такими просторами CSS є і .
За допомогою цього міксину встановлюється або блок-батька. А потім просто забирається порожній простір у останнього елемента цього блоку.
Стилізація placeholder
Стилізація placeholder є досить хитрою задачею через необхідність використання вендорних префіксів, тому використання міксину значно спрощує це завдання:
Висновок
На цьому переклад закінчено.
Від себе можу додати.
Під Sublime Text 3 є плагін Stylus для підсвічування синтаксису та автоматичної табуляції. Якщо планується подальша робота в Stylus, то даний плагін є обов'язковим до встановлення - без нього просто важко і довго кодувати.
Плагін Emmet має підтримку синтаксису Stylus (мене Emmet не перестає тішити). Всі гарячі клавіші Emmet залишилися незмінними і під Stylus, ніби я кодив у старому доброму CSS.
## Git Stash> Я прямо закохався в команду stash від git, хоча до самого git належу без. фанатизму. Команда _git stash_ призначена для. … Continue reading