CSS препроцессор Stylus

stylus css препроцессор
Метки: /

В этой статье вы прочитаете, о том, что такое CSS препроцессор Stylus и как его установить.

Также, если вам интересен больше SASS, то прочитайте статью: «Установка sass через path», там вы узнаете как это делать, и на Windows и на Linux.

Что такое Stylus:

Как говорилось выше и судя по названию статьи, это препроцессор CSS, который призван упростить работу со стилями.

Ещё нужно сказать, что синтаксис был позаимствован с препроцессора SASS, поэтому, если вы знаете его чистый синтаксис, то вам не составит труда его изучить.

Базовый синтаксис:

Здесь не будет разбираться прям подробности синтаксиса, а только самые важные элементы.

Сначала посмотрим как вообще добавлять стили для элементов, но тут стоит сказать, что не много отличается от стандартного CSS.

Как видите, тут кроме свойств и стилей больше нечего нет, не фигурных скобок, не двоеточий и даже точек запятой нет, что на мой взгляд вообще не удобно, превращается это вот такой CSS.

Также вложенность работает по  принципу, вам надо без всяких знаков, внутри

Переменные:

Для того, что создать переменную, вам надо только написать её название и потом после знака равно присвоить ей нужное значение.

То есть опять не каких знаков, кроме знака равно нет, это всё выйдет тот же CSS как в прошлом примере.

Функции:

Одна из самых полезных особенностей Stylus и вообще препроцессоров это возможность создавать функции или как их тут называют, миксины.

То есть, вы просто пишите название, потом круглые скобки и если вам надо, то внутри них объявляете параметры, как в различных языках программирования, также, когда уже назначаете стили, можете объявить миксин в качестве свойства или значения свойства, вот результат.

Это пожалуй самое главное что стоит знать, но также существуют циклы и другие возможности, тут были только основные.

Как установить Stylus:

Устанавливается Stylus только через NPM, поэтом сначала нужно скачать и установить Node.js, про это посмотрите в этих статьях.

Теперь перейдём к самой команде.

Вывод:

В этой статье вы прочитали про CSS препроцессор Stylus, было рассказано, что это такое, базовый синтаксис и как его установить.

Также, если вы хотите узнать подробнее про его возможности, то посмотрите его официальную документацию.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: