Стилус препроцессор кода CSS, что позволяет нам упростить работу в нашем текстовом редакторе, а затем я объясню причины своего утверждения.
Это таблица стилей, как мы ее знаем:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5 пикселей; радиус границы: 5 пикселей; }
И это будет та же таблица стилей, созданная с помощью Стилус:
основной шрифт 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Где ключи? Откуда взялась точка с запятой, двоеточие? Забытый, Стилус делает это за нас.
Если вы начинаете с CSS y HTML не рекомендуется использовать Стилус из-за того простого факта, что вы можете забыть, как все работает на самом деле, но если у вас уже есть время в этом мире и вы хотите сэкономить, код и работу ... продолжайте.
Программисты Питон найдет в Стилус что-то очень похожее на то, к чему они адаптированы, так как вам нужно только правильно отступить, чтобы магия была сделана.
Установка
Для Стилус работа, которую мы должны установить Node.js который находится в ветке сообщества, поэтому приступаем к его выполнению:
$ sudo pacman -S nodejs
А потом устанавливаем Stylus. Традиционный способ:
$ npm install -g stylus
Устанавливается нормально, но у меня не работает, поэтому установить из AUR намного проще:
$ yaourt -S nodejs-stylus
Как пользоваться стилусом
Хорошо, мы уже установили Node.js и мы установили Стилус.. Как мы это используем? Это просто. Допустим, у нас есть каталог со следующими файлами:
- каталог - index.html - style.css
Что нам нужно сделать, так это создать файл стиль.стиль, над которым мы и будем работать. В этом файле может быть что-то вроде:
цвет фона тела #ffff размер шрифта 12 пикселей a. цвет кнопки красный отступ 10 пикселей
Если мы сохраняем или вносим какие-либо изменения, ничего не происходит, потому что мы не «компилируем» наш файл. Чтобы скомпилировать его, мы открываем терминал в нашем каталоге (где файл стиль.стиль) и выполняем:
stylus -c style.styl
Но каждый раз, когда мы сохраняем файл стиль.стиль нам нужно было бы выполнить код, но, к счастью, в этом нет необходимости, поскольку если мы выполним ту же команду, но добавим параметр -w (смотрите) происходит следующее:
stylus -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 в их формат, и способы использования их синтаксиса очень разнообразны. И это всего лишь превью. Поэтому я призываю вас, если вам интересно, узнать немного больше о Стилус