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

Reading time ~6 minutes

О чем будет речь? О миксинах библиотеки 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;
, достаточно написать одну строчку:

.block
  size 20px 30px
.block
  width: 20px;
  height: 30px;
.block
  size 20px
.block
  width: 20px;
  height: 20px;

Миксин Overflow

Миксин для задания свойства

1
text-overflow: ellipsis
. Полезный миксин, которые реально может помочь в написании одной строки стилей вместо трех правил:

.block
  overflow ellipsis
.block
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

Миксин Absolute/Fixed/Relative

Миксин для генерирования CSS-свойства

1
position: absolute
,
1
position: fixed
или
1
position: relative
. Этот миксин очень похож на миксин
1
size
- все преимущество его использования только в краткости записи:

.block
  absolute top left
position: absolute;
top: 0;
left: 0;
.block
  absolute top 20px left 30px
.block
  position: absolute;
  top: 20px;
  left: 30px;
.block
  absolute bottom 20px right 30px
.block
  position: absolute;
  bottom: 20px;
  right: 30px;
.block
  relative top 10px left 20px
.block
  position: relative;
  top: 10px;
  left: 20px;
.block
  fixed top 10px left 2%
.block
  position: fixed;
  top: 10px;
  left: 20px;

Миксин Border

Миксин для генерирования CSS

1
border: 1px solid color
. Достаточно бесполезный миксин, так как проще и быстрее воспользоваться shortcut’ом
1
bd+
из Emmet.

.block
  border #800
.block
  border: 1px solid #800

Миксин Clearfix()

Миксин для генерации

1
clearfix
. У
1
jeet.gs
есть свой миксин
1
cf()
для генерации
1
clearfix
. Однако, миксин
1
clearfix()
имеет более понятное название, говорящее - что этот миксин делает. Поэтому использование этого миксина более логичное - читая код, можно сразу сказать, что этот миксин делает.

Функция rgba()

Если быть точным, функция

1
rgba()
не относится к миксинам библиотеки Nib. Это функция препроцессора Stylus. И задача ее - преобразование значения цвета в формате HEX в формат RGBA(). Достаточно бесполезная функция, если только кодер не привык писать значения цветов в RGBA-формате:

.block
  color rgba(#ff0000, .8)
.block
  color: rgba(255, 0, 0, 0.9);

Миксин Background

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

1
top
,
1
left
,
1
right
,
1
bottom
:

.block
  background linear-gradient(top,#f00,#0f0)

Миксин для генерации радиального градиента - очень похож на линейный градиент. Разница только в некоторых моментах:

.block
  background radial-gradient(center,#f00 30%, #fff 31%)

Миксин Box-sizing

Еще один полезный миксин - для генерации CSS-свойства

1
box-sizing: border-box
. Что это за свойство, говорить не приходиться:

.block
  box-sizing: border-box
.block {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Миксин Image

Миксин для генерации CSS-свойства

1
background-image
. Генерируются два свойства - для нормального разрешения и для дисплеев Retina. Для этого необходимо подготовить два варианта изображений как было сказано выше - тогда миксин сработает.

Первое изображение - нормального размера для нормального разрешения. Второе изображение - увеличенная вдвое версия нормального изображения, для Retina-экранов (это версия

1
@2x
):

.block
  image 'images/background.jpg'
.block {
  background-image: url("images/background.jpg");
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  .block {
    background-image: url("images/background@2x.jpg");
    background-size: auto auto;
  }
}

На этом все.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024