О чем будет речь? О миксинах библиотеки Nib. Ранее я уже писал о том, как подключать эту библиотеку в свой проект. Ничего сложного в этом нет - достаточно установить Nib и подключить ее в проект.
Но вот вопрос о миксинах этой библиотеки - это отдельный вопрос. Дело в двух моментах - размере библиотеки и документации к ней.
Во-первых - Nib гораздо меньше, чем Compass (это чтобы было, с чем сравнивать). Compass больше, тщательнее сработан - в этой библиотеке есть миксины практически на все случаи жизни. У Nib миксинов меньше, ощутимо меньше.
На это можно ответить вполне резонно. Первое - из личного опыта, на своей практике из всего большого многообразия миксинов Compass я использовал только 10 штук (максимум). Второе - написать миксин на Stylus не просто, а очень просто! Так что, если возникает в этом необходимость - никаких проблем в создании пользовательского миксина не может быть.
Вторая проблема с Nib более существена и неприятна, скажем так. Заключается она в отсутствии хорошо сделанной документации к библиотеке Nib. То есть, есть официальный сайт проекта Nib, есть репозиторий на GitHub. Но вот такой хорошо оформленной документации, как у Compass, вы не найдете.
Именно поэтому у меня и возникла мысль, перевоплотившаяся в желание написать маленькое пособие для небольшой доли миксинов, которые доступны в Nib.
Миксин Size
Миксин для задания размеров элементам
или 1
display: block
. Преимущество у данного миксина - в краткости его написания. Не нужно писать - 1
display: inline-block
, достаточно написать одну строчку:1
width: 20px; height: 20px;
Миксин Overflow
Миксин для задания свойства
. Полезный миксин, которые реально может помочь в написании одной строки стилей вместо трех правил:1
text-overflow: ellipsis
Миксин Absolute/Fixed/Relative
Миксин для генерирования CSS-свойства
, 1
position: absolute
или 1
position: fixed
. Этот миксин очень похож на миксин 1
position: relative
- все преимущество его использования только в краткости записи:1
size
Миксин Border
Миксин для генерирования CSS
. Достаточно бесполезный миксин, так как проще и быстрее воспользоваться shortcut’ом 1
border: 1px solid color
из Emmet.1
bd+
Миксин Clearfix()
Миксин для генерации
. У 1
clearfix
есть свой миксин 1
jeet.gs
для генерации 1
cf()
. Однако, миксин 1
clearfix
имеет более понятное название, говорящее - что этот миксин делает. Поэтому использование этого миксина более логичное - читая код, можно сразу сказать, что этот миксин делает.1
clearfix()
Функция rgba()
Если быть точным, функция
не относится к миксинам библиотеки Nib. Это функция препроцессора Stylus. И задача ее - преобразование значения цвета в формате HEX в формат RGBA(). Достаточно бесполезная функция, если только кодер не привык писать значения цветов в RGBA-формате:1
rgba()
Миксин Background
Вот этот миксин является действительно полезным - благодаря краткости записи и результату генерации этого миксина. Как уже можно догадаться, этот миксин генерирует линейный градиент. Направление градиента управляется служебным словом, стоящим вначале миксина -
, 1
top
, 1
left
, 1
right
:1
bottom
Миксин для генерации радиального градиента - очень похож на линейный градиент. Разница только в некоторых моментах:
Миксин Box-sizing
Еще один полезный миксин - для генерации CSS-свойства
. Что это за свойство, говорить не приходиться:1
box-sizing: border-box
Миксин Image
Миксин для генерации CSS-свойства
. Генерируются два свойства - для нормального разрешения и для дисплеев Retina. Для этого необходимо подготовить два варианта изображений как было сказано выше - тогда миксин сработает.1
background-image
Первое изображение - нормального размера для нормального разрешения. Второе изображение - увеличенная вдвое версия нормального изображения, для Retina-экранов (это версия
):1
@2x
На этом все.