СSS framework Compass: полезные миксины для верстки

Опубликовано: Понедельник, Май 27, 2013 Комментарии (0)

В текущий момент своей рабочей жизни я пользуюсь в верстке css фрэймворком Compass. Буду в этом посте собирать то, чем я действительно пользуюсь, что действительно для меня очень полезно и этого не найти в первых 5 ссылках выдачи гугл (ну или по крайней мере, я когда-то это не нашла так быстро).

Кроссбраузерный CSS градиент

Это кажется банально, но вариантов реализации несколько. Я выбрала себе комбинацию средств Compass, которая мне кажется наиболее приемлемой.

Микс градиента для Compass:

То что получается на выходе в css:

 

UPD 14.03.14 Теперь у Compass появился новый миксин для градиента (информация на их сайте). В связи с этим я переработала свой миксин, чтобы можно было задавать направление и фоновое изображение:

Обратите внимание:

  • В миксине background вы можете одновременно указывать и картинку и линейный градиент и радиальный градиент.
  • Миксин filter-gradient оставляем, он генерирует фильтр для линейного градиента в IE6-8.
  • Подробнее о параметрах mixin background, а также других функциях для верстки градиентов на официальном сайте Compass

Выравнивание блока по центру

Небольшой mixin для Compass для выравнивания элемента внутри другого элемента. К примеру, нам нужно выровнять изображение внутри дива.

DEMO – выравнивание внутри блока с помощью html и css

HTML разметка тогда будет:

Пишем миксин для компасс:

Где @extend %inline-block; это:

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

В итоге получится что-то типа:

Поделитесь с друзьями:

Читайте также:

Комментируйте: