7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Sass

Представляем Bourbon: легковесные Sass миксины и не только

Read Time: 4 mins
This post is part of a series called Bourbon: the Connoisseurs’ Choice for Sass Mixins.
A Taste of Bourbon’s Delicious Mixins

Russian (Pусский) translation by Nickita Chuhaj (you can also view the original English article)

Bourbon это первоклассная библиотека Sass миксинов для дизайнеров. Минималистический подход и серьезное отношение к созданию качественного кода с заботой о семантике. Bourbon поощряет наиболее эффективные пути к разработке масштабируемого кода.

Введение

На самом деле, являясь далеко не просто библиотекой миксинов, Bourbon вырос в небольшой набор проектов, поддерживаемых дизайнерами из thoughtbot. В предстоящих уроках я раскрою все нижеперечисленное более подробно:

Ну а сейчас - вот в чем суть:

Bourbon представляет собой небольшой, но "соблазнительный" набор миксинов и функций, добытых из различных источников Sass кода дизайнеров. Основная идея заключалась в централизации полезных миксинов, дабы избежать изобретения колеса снова и снова.

Neat это легкий фреймворк с сеткой для Sass. Он построен на основе Bourbon. Предпосылкой к его созданию послужила необходимость семантического подхода к разметке сайтов.

Refills это коллекция дизайнерских паттернов, с оформлением или без. Так же на основе Bourbon и Neat. В вашем распоряжении супер полезные сниппеты.

Bitters это набор из небольшого числа базовых стилей, переменных и немного структуры для новых Bourbon проектов. Позволяет втянуться в кратчаййшие сроки.

Bourbon: библиотека примесей для Sass

Оригинальный фреймворк Bourbon был выпущен в начале 2011 года автором Philip LaPier, на тот момент - дизайнером цифровой продукции. Проект начинался как объединение полезных миксинов от различных дизайнеров компании.

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

Взятый на вооружение, он помогает писать код быстрее и справляться с многочисленными рутинными мелочами (вроде раздражающих вендорных префиксов). Миксины фреймворка часто выступают в роли "обертки" для вывода качетвенного CSS, но при этом остаются настолько простыми, насколько возможно, придерживаясь оригинального CSS синтаксиса.

Стоит отметить

  • Bourbon это чистый Sass, кроссплатформенный и работающий с любым Sass проектом.
  • Очень близок к базовому CSS синтаксису.
  • Не привязан к Ruby (в отличии от Compass).
  • Bourbon содержит замечательные функции
  • Поддерживает актуальные вендорные префиксы.
  • Супер легкий.
  • Семантический.

Настройка

Ну что ж, приступим? Запускаем терминал (или командную строку), переходим в папку с вашим проектом и устанавливаем Bourbon с помощью RubyGems:

Примечание: Если вы не совсем комфортно себя чувствуете, используя командную строку, предлагаем оценить наш цикл для начинающих командная строка для веб-дизайна

Перейдите в папку с таблицами стилей и создайте папку bourbon.

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

filefilefile

Закончите установку импортом созданных Sass файлов в вашу таблицу стилей. Импортируйте Bourbon в самый верх вашего application.sass файла. Все остальные Sass файлы необходимо импортировать ниже.

В файле application.sass:

Обзор миксинов Bourbon

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

Вот парочка миксинов, с которыми я рекомендую ознакомиться в первую очередь:

  • background-image
  • linear-gradient
  • border-radius
  • retina-image
  • inline-block
  • transitions
  • box-sizing
  • animations
  • font-face
  • triangle
  • clearfix
  • position
  • button
  • size

Мы узнаем больше об отдельных миксинах в будущих уроках.

Обзор функций Bourbon

Sass сам по себе уже имет массу встроенных функций. От манипулирования последовательностями, до игр с прозрачностью и цветом. Bourbon добавляет некоторое количество выборочных усовершенствований и предоставвляет очень полезные функции Sass для различных обстоятельств. К примеру:

  • linear-gradient()
  • modular-scale()
  • golden-ratio()
  • shade()
  • tint()
  • em()

Опять же, мы взглянем подробнее на функции Bourbon в дальнейшем.

Дополнения (аддоны) Bourbon

Bourbon определяет небольшие, но полезные наборы переменных по умолчанию, к примеру:

Переменные для списка безопасных шрифтов

  • $lucida-grande
  • $monospace
  • $helvetica
  • $verdana
  • $georgia

Вместо обычного способа определени набора шрифтов:

с Bourbon вы используете одну из переменных семейства шрифтов:

Временные переменные

Бурбон предоставляет массу временных переменных, прямо из коробки. Миксин типа transition иммеет следующий синтаксис:

Последний параметр определяет расчет времени (тайминг) через переменную. Вы можете точно настроить поведение перехода определяя однй из 24 переменных для контроля тайминга. Следующие GIF иллюстрирует варианты:

filefilefile

Заключение

Сделайте себе и своим коллегам отдолжение - дайте Bourbon шанс. Фреймворк уделяет большое внимание семантической разметке, и вместе с тем остается легковесным и простым. Он сослужит хорошую службу CSS архитектуре вашего проекта и поможет освоить и усовершенствовать наилучшие методы создания превосходного кода.

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.