Nib - библиотека миксинов под Stylus

Reading time ~4 minutes

Легкое знакомство с библиотекой Nib под препроцессор Stylus. Эта библиотека является тем же самым, что Compass или Bourbon под препроцессор Sass.

Библиотека миксинов Nib написана под препроцессор Stylus и является аналогом более известных библиотек Compass или Bourbon под препроцессор Sass. С самим препроцессором Stylus я с вами познакомился немного раньше - скажем так, это было краткое и легкое знакомство.

Библиотека Nib проживает по адресу - Nib GitHub. Она маленькая и легкая, но должна быть полезной. Поэтому мне необходимо с ней познакомиться поближе.

Установка библиотеки Nib

В Сети мною было найдено два способа установки данной библиотеки:

  • с использованием GitHub
  • с использованием менеджера пакетов npm

Второй способ мне кажется более удобным, так как в этом случае библиотека устанавливается глобально и доступна для любого проекта из любого места файловой системы. В первом же случае придется устанавливать библиотеку каждый раз - локально в каждый отдельный проект.

Если вдруг в системе еще не установлен препроцессор Stylus, то первоначально необходимо установить его командой:

$ sudo npm install stylus --global

Не забудьте добавить ключ --global, чтобы препроцессор установился глобально в системе.

Установка библиотеки Nib почти ничем не отличается от установки препроцессора и выполняется командой:

$ sudo npm install nib --global

Отлично! Все, что теперь осталось сделать - это подключить библиотеку в текущий проект (текущий рабочий Stylus-файл).

Это выполняется директивой @import:

@import nib

Проверим, что библиотека подключена без ошибок и отрабатывает в проекте\файле. Для этого запишем в файле style.styl несколько миксинов этой библиотеки и “натравим” на файл style.styl утилиту stylus с несколькими ключами:

$ stylus -u nib -w style.styl

здесь:

  • -u nib - говорит о том, что при компиляции в CSS должно учитываться наличие библиотеки Nib
  • -w style.styl - мониторить изменения в файле style.styl и своевременно выполнять его компиляцию в CSS

Посмотрим на результат компиляции Stylus в CSS - очень уж любопытно, получилось ли?

Библиотека Nib в действии

Отлично! Все работает четко - миксины преобразуются в готовый CSS-код. Правда, выглядит он немного неприглядно - не причесанный и не почищенный.

Ну это решается просто - достаточно на этот CSS-файл натравить Gulp-плагины gulp-csscomb и gulp-autoprefixer.

Главное - библиотека подключена и работает!

Nib - как подружить с Gulp

До этого момента мною использовалась нативная утилита stylus для компиляции из формата Stylus в формат CSS. И в том числе - с поддержкой библиотеки Nib.

Однако, на практике такой способ вряд-ли будет использоваться. Я имею ввиду, что использование лишь одной утилиты stylus - я сомневаюсь, что кому-либо пригодиться.

Гораздо практичнее использование Gulp, у которого есть соответствующий плагин gulp-stylus для компиляции из формата Stylus в CSS.

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

Ниже я рассмотрю процесс подключения и настройки Nib (а заодно - и Stylus) в моем любимом Gulp.

Установка плагинов gulp-stylus и nib

В своем рабочем проекте необходимо установить два плагина (с помощью консоли):

$ sudo npm install gulp-stylus nib --save-dev

В результате оба пакета установятся в проект и добавятся в файл package.json в качестве зависимостей:

...
"gulp-stylus": "^1.3.4",
"nib": "^1.0.4"
...

Настройка файла gulpfile.js

В файле gulpfile.js необходимо внести несколько правок. Первым делом - добавляем в начало файла две с строки:

var gulp = require(gulp),
  stylus = require(gulp-stylus),
  nib = require(nib),
...

Затем создаем задачу task для компиляции из Stylus в CSS. В качестве параметра у метода stylus будет дополнительная строка use:[nib()], говорящая о том, что необходимо использовать библиотеку Nib:

gulp.task(stylus, function () {
  gulp.src(app/styles/common.styl)
    .pipe(plumber())
    .pipe(stylus({use:[nib()]}))
    .pipe(prefixer({
      browsers: [last 2 versions]
    }))
    .pipe(csscomb())
    .pipe(gulp.dest(dist/assets/styles/));
});

Вот это и все (необходимый минимум), чтобы подружить библиотеку Nib c Gulp.

Не забываем подключить в stylus-файл проекта библиотеку:

@import nib

Миксины библиотеки Nib

С подключением библиотеки Nib разобрались. Остался вопрос - а что там внутри, под капотом у Nib?

С малой толикой миксинов я уже познакомился, когда создавал тестовую страничку подключения и компиляции (см. изображение выше).

На официальной странице Nib есть ссылка на документацию по миксинам - Документация миксинов Nib.

Там все описано просто и понято, с подробными примерами. Осталось только читать и пользоваться.

В принципе, больше и сказать мне нечего (по крайней мере - мне) по поводу миксинов в Nib. Дальше только - брать их и использовать на практике.

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке