В этой статье вы прочитаете, о том, что такое CSS препроцессор Stylus и как его установить.
Также, если вам интересен больше SASS, то прочитайте статью: «Установка sass через path», там вы узнаете как это делать, и на Windows и на Linux.
Что такое Stylus:
Как говорилось выше и судя по названию статьи, это препроцессор CSS, который призван упростить работу со стилями.
Ещё нужно сказать, что синтаксис был позаимствован с препроцессора SASS, поэтому, если вы знаете его чистый синтаксис, то вам не составит труда его изучить.
Базовый синтаксис:
Здесь не будет разбираться прям подробности синтаксиса, а только самые важные элементы.
Сначала посмотрим как вообще добавлять стили для элементов, но тут стоит сказать, что не много отличается от стандартного CSS.
1 2 3 | body margin 0 padding 0 |
Как видите, тут кроме свойств и стилей больше нечего нет, не фигурных скобок, не двоеточий и даже точек запятой нет, что на мой взгляд вообще не удобно, превращается это вот такой CSS.
1 2 3 4 | body { margin: 0; padding: 0; } |
Также вложенность работает по принципу, вам надо без всяких знаков, внутри
Переменные:
Для того, что создать переменную, вам надо только написать её название и потом после знака равно присвоить ей нужное значение.
1 2 3 4 5 6 | margin-size = 0 padding-size = 0 body margin margin-size padding padding-size |
То есть опять не каких знаков, кроме знака равно нет, это всё выйдет тот же CSS как в прошлом примере.
1 2 3 4 | body { margin: 0; padding: 0; } |
Функции:
Одна из самых полезных особенностей Stylus и вообще препроцессоров это возможность создавать функции или как их тут называют, миксины.
1 2 3 4 5 6 7 | border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n .block border-radius(10px) |
То есть, вы просто пишите название, потом круглые скобки и если вам надо, то внутри них объявляете параметры, как в различных языках программирования, также, когда уже назначаете стили, можете объявить миксин в качестве свойства или значения свойства, вот результат.
1 2 3 4 5 | .block { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } |
Это пожалуй самое главное что стоит знать, но также существуют циклы и другие возможности, тут были только основные.
Как установить Stylus:
Устанавливается Stylus только через NPM, поэтом сначала нужно скачать и установить Node.js, про это посмотрите в этих статьях.
Теперь перейдём к самой команде.
1 | npm install stylus -g |
Вывод:
В этой статье вы прочитали про CSS препроцессор Stylus, было рассказано, что это такое, базовый синтаксис и как его установить.
Также, если вы хотите узнать подробнее про его возможности, то посмотрите его официальную документацию.
Подписываетесь на соц-сети:
Оценка:
Загрузка...