Библиотека Bourbon

Bourbon (читается как бурбон, такой сорт виски) — библиотека примесей Sass распространяемая по лицензии MIT. Официальный сайт находится по адресу http://bourbon.io.

Bourbon хорош несколькими вещами. Во-первых, в библиотеке действительно много актуальных вещей упрощающих написание кода — анимация, работа с цветом, фоном, рамками, полями и др. Во-вторых, вы легко можете верстать колоночную адаптивную структуру страницы с помощью Neat — фреймворка для Sass и Bourbon от тех же авторов. И, в-третьих, вы можете не ограничиваться небольшими фрагментами кода, а вставлять на страницу уже готовые компоненты вроде навигации, вкладок, колонок, таблиц и др. с помощью Reffils. Так называется набор шаблонов и компонент построенный на Neat и Bourbon.

Проще всего использовать Bourbon совместно с сайтом SassMeister. В первой строке добавляем импорт библиотеки.

@import "bourbon/bourbon";

А далее вызываем любые примеси описанные в документации Bourbon. Вот пример Sass, который добавляет градиент и плавный поворот квадрата при наведении на него курсора.

@import "bourbon/bourbon";
.box {
  border: 1px solid #2aa4b2;
  height: 40px; width: 40px;
  @include background-image(linear-gradient(#8fdce5, #3dc3d1));
  @include transition(all 2.0s ease-in-out);
  &:hover {
    @include transform(rotate(90deg)); 
  }
}

В итоге получим следующий стиль.

.box {
  border: 1px solid #2aa4b2;
  height: 40px;
  width: 40px;
  background-image: linear-gradient(#8fdce5, #3dc3d1);
  transition: all 2s ease-in-out;
}
.box:hover {
  transform: rotate(90deg);
}