Стилус є попереднім процесором коду CSS, що дозволяє нам простіше працювати в нашому текстовому редакторі, а потім я пояснюю причини свого висловлювання.
Це таблиця стилів, якою ми її знаємо:
body {шрифт: 12px Helvetica, Arial, без засічок; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; радіус кордону: 5 пікселів; }
І це буде та сама таблиця стилів, яка створена Стилус:
шрифт основного тексту 12 пікселів Helvetica, Arial, без зарубок a. кнопка -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Де ключі? Звідки взялася крапка з комою, двокрапка? Забутий, Стилус робить це для нас.
Якщо ви починаєте з CSS y HTML не рекомендується використовувати Стилус за той простий факт, що ти можеш забути, як насправді все працює, але якщо ти вже маєш час у цьому світі і хочеш зберегти собі код і працювати .. вперед.
Програмісти Python знайде в Стилус щось дуже схоже на те, до чого вони пристосовані, оскільки вам потрібно лише правильно відступити, щоб зробити магію.
Установка
Для Стилус роботу, яку ми повинні встановити Node.js яка знаходиться у відділенні Спільноти, тому ми продовжуємо це робити:
$ sudo pacman -S nodejs
А пізніше ми встановлюємо Stylus. Традиційним способом буде:
$ npm install -g stylus
Він добре встановлюється, але у мене це не працює, тому набагато простіше встановити з AUR:
$ yaourt -S nodejs-stylus
Як користуватися стилусом
Гаразд, ми вже встановили Node.js і ми встановили Стилус.. Як ми ним користуємось? Це просто. Скажімо, у нас є каталог із такими файлами:
- dir - index.html - style.css
Що нам потрібно зробити, це створити файл стиль.стиль, над яким ми збираємось працювати. У цьому файлі ми можемо мати щось на зразок:
тіло фону-колір #ffff розмір шрифту 12 пікселів. колір кнопки червоний відступ 10 пікселів
Якщо ми збережемо або внесемо якісь зміни, нічого не трапиться, тому що ми не "компілюємо" наш файл. Для її компіляції ми відкриваємо термінал у нашому каталозі (де знаходиться файл стиль.стиль) і виконуємо:
stylus -c style.styl
Але кожного разу, коли ми зберігаємо файл стиль.стиль нам довелося б виконати код, але, на щастя, це не потрібно, оскільки якщо ми виконуємо ту саму команду, але додаючи параметр -w (дивіться) трапляється таке:
стилус -c -w style.styl спостереження /usr/lib/node_modules/stylus/lib/functions/index.styl скомпільований style.css перегляд style.styl скомпільований style.css скомпільований style.css
Іншими словами, файл автоматично компілюється .. Чи буде результат?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Як бачите, наш код не тільки створює нас CSS, але він усуває непотрібні пробіли, тому наша таблиця стилів важить менше
Не тільки це, Стилус Це дозволяє нам передавати файли CSS у їх формат, і спосіб використання їх синтаксису дуже різноманітний. І це лише попередній перегляд. Тож я закликаю вас, якщо вам цікаво, дізнатися трохи більше про це Стилус