Stylus — це динамічна мова таблиць стилів, яка компілюється в каскадні таблиці стилів (CSS). Її створено за аналогією з Sass та LESS. На разі це третій за популярністю препроцесор для CSS. Його створено програмістом TJ Holowaychuk, що раніше працював над Node.js, а також створив мову програмування Luna. Мову написано на JADE та Node.js.
Селектори На відміну від CSS, котрий використовує дужки, щоб відокремлювати правила для селекторів, тут використовуються відступи. Окрім того, двокрапка (:) може бути за бажанням замінена на пробіл. Тому наступний CSS:body { color: white; }буде скорочено до:body color white
Змінні Stylus дає змогу оголошувати змінні. На відміну від LESS та Sass, тут непотрібно використовувати символ, що передує імені змінної. Окрім того, оголошення змінних проходить автоматично, якщо властивість розділяється з ключовим словом або словами. Ця риса мови ідентична мові Python.message = 'Hello, World!'
div:before content message color #ffffffКомпілятор Stylus скомпілює це в наступний код:div:before { content: 'Hello World'; color: #ffffff; }
«Міксіни» та функції Міксіни (mixins) та функції оголошуються однаково, але викликаються по-різному.
Наприклад, якщо вам потрібно визначити заокруглені бордюри (border) у CSS без використання префіксів, код буде таким:border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius nі далі, щоб використати цей mixin, знадобиться такий код:div.rectangle border-radius(10px)в результаті ви отримаєте:div.rectangle { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
Інтерполяція (Interpolation) Щоб додати змінні як аргументи й ідентифікатори, треба передавати їх у фігурних дужках. Наприклад: -webkit-{'border' + '-radius'} буде скомпільовано в:-webkit-border-radius
Примітки
Посилання
Репозиторій Stylus (Git) Poll Results: Popularity of CSS Preprocessors , 2012 A Survey on CSS Preprocessors. Ricardo Queirós , 2017