Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass
Webdesign

Одну на дорожку: вкусные Bourbon миксины

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Bourbon: the Connoisseurs’ Choice for Sass Mixins.
A Taste of Bourbon’s Delicious Mixins
Bourbon on the Rocks: Cool Functions to Improve Your Sass

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

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

Очередной список полезностей

Мы изучим следующие восемь миксинов:

  • Миксин Inline Block
  • Миксин Position
  • Миксин Triangle
  • Миксин Clearfix
  • Миксин Button
  • Миксин Size
  • Миксин HiDPI media query
  • Миксин Retina Image

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

Миксин Inline Block

Параграф по умолчанию обладает свойством display равным block, что в свою очередь делает его "блочным" элементом.

HTML:

file

Блочные элементы, такие как параграфы, автоматически создают новую строку в нашем лейауте.

Этот миксин пригодится вам в том случае, если вы хотите изменить свойство display элемента, который задаётся по умолчанию на inline-block. Миксин не только устанавливает display: inline-block, но также позаботится о том, что элемент будет правильно отображаться в устаревших браузерах, включая IE7.

Узнайте больше о display на designshack.net.

Sass: Эти блоки обладают поведением похожим на float, благодаря inline-block.

Взгляните на конечный CSS результат. Кто захочет возится со всем этим?

Конечный CSS результат:

file

Установив display: inline-block, параграф будет отображаться на одной линии, но в тоже время сохранит все характеристики блочного элемента.

Внимание! Обратите внимание на пробелы между элементами. Если вы используете float для получения подобного лейаута, подобных пробелов вы не увидите. Это своего рода пробел в HTML который появляется по умолчанию, он не исчезнет если вы установите margin равный 0px. Вместо этого, вам нужно убрать любые отступы, разрывы между символами в самом коде разметки, пример можно увидеть ниже:

Миксин Position

Данный миксин простой способ написать что-то подобное:

Sass:

Sass:

На этом всё. Никакого волшебства, но всё же довольно полезно. Сохраняя таблицу стилей читабельной и простой, точно пригодится вам в дальнейшем.

Миксин Triangle

Хотите использовать CSS триугольник без лишней возни? Для этого вам не нужно использовать изображения. Сделать это очень просто используя миксин.

Sass:

Третий параметр отвечает за направление треугольник. Для миксина доступны следующие опции:

file
  • down
  • up
  • left
  • right

  • up-right
  • up-left
  • down-right
  • down-left

Вы даже можете указать второй цвет если хотите, фоновый цвет для вашего треугольника.

Миксин Cleafix

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

Миксин clearfix решает данную проблему, когда используется на элементе контейнера/обёртки (container/wrapper). Пожалуй лучшее в этом миксине, это то что для него не требуется дополнительной разметки, чтобы clearfix работал. Ваше разметка остаётся семантичной, представление, стили не влияют на содержание, clearfix находится только в таблице стилей. Взгляните на простой пример:

HTML:

Sass:

file

В примере выше, серый контейнер расширяется, чтобы поместить логотип со свойством float внутри. Однако, когда clearfix не используется:

file

Если вы взгляните на исходный код, принцип работы micro clearfix станет понятен:

Sass: исходный код Bourbon

Миксин использует псевдо элемент :after, добавляя пустую стоку в конце контейнера. Таким образом мы создаём видимость контента после нашего логотипа, данная хитрость даёт понять браузеру, что контейнер должен окружать внутренние элементы.

Button Mixin

Вам нужны готовые к использованию, отлично выглядящие кнопки?

Стандартная кнопка

file

HTML:

Sass:

Это всё! Простые кнопки, плюс семантика. Также они идут с привлекательным эффектом при наведении мыши. Помимо этого можно воспользоваться дополнительными опциями:

Pill Button (кнопка c формой пилюли)

file

HTML:

Shiny Button (светящаяся кнопка)

file

HTML:

Sass:

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

file

Sass:

Миксин Size

Вам когда либо приходилось объявлять ширину и высоту для одного селектора? С Bourbon, вот всё что вам нужно:

Sass:

Итоговый CSS:

Вы можете указать значение в пикселях или просто числовое значение. Вы также можете использовать auto в качестве значения. Если вы предоставите только один размер, Bourbon будет считать, что вам нужен квадрат. 

Sass:

Миксин HIDPI

На тот случай, если вам надо создать медиа запрос с со всеми необходимыми вендорными префиксами, для обнаружения HIDPI ("Retina" ретина) устройств, этот миксин призван вам помочь.

Сперва этот миксин предоставляет целевое значение для определения соотношения пикселей устройства, затем, css который будет работать в том случае если медиа запрос соответствует данному значению. По умолчанию соотношение равно 1.3.

Sass HiDPI-media-query:

Итоговый CSS:

Довольно круто! Количество повторяющегося кода значительно уменьшилось.

Миксин Retian Image

В зависимости от плотности пикселей устройства на котором будет показан ваш дизайн, вы можете отравлять изображения с соответствующим разрешением. Этот неплохой миксин предоставляет возможность добавить фоновое изображения для ретины или обычное фоновое изображение - в зависимости от HiDPI-media-query (медиа запроса), который проверят плотность пикселей устройства.

Если я не ошибаюсь, в качестве бонуса, отправляется лишь одно изображение, оба не будут загружаться - что в свою очередь благоприятно сказывается на работу сайта на мобильном устройстве. Если всё вышеописанное вам не понятно, я рекомендую начать с замечательной статьи на Smashing Magazine.

Sass:

Итоговый CSS поможет вам понять функционал:

По умолчанию устройства с соотношением пикселей 1.3 определяют Apple "Retina" устройства (соотношение равно 2), также как и устройства с меньшим соотношением, но которое должно быть больше 1.3.

Данному миксину требуются изображения формата .png в качестве стандартного расширения. По умолчанию, чтобы в названии файла было _2x.png для ретина изображений. Вы можете изменить это указав название файла, которые вам больше подходит, также как и расширение по умолчанию:

Sass:

Итоговый CSS:

На этом всё!

Это всё что мы узнали сегодня, касательно Bourbon миксинов. В следующем туториале мы посмотрим на функции доступные в Bourbon.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.