Skip to content

Instantly share code, notes, and snippets.

@artpolikarpov
Created August 29, 2012 20:32
Show Gist options
  • Save artpolikarpov/3518523 to your computer and use it in GitHub Desktop.
Save artpolikarpov/3518523 to your computer and use it in GitHub Desktop.
Сасс-миксин для декорирования блоков на основе одной картинки: http://artgorbunov.ru/bb/soviet/20120830/
// Декорируем фиксированные по высоте блоки
@mixin _decorate($img, $tailTop) {
background-image: image-url($img);
background-repeat: no-repeat;
position: absolute;
width: 50%;
height: image-height($img);
top: 0;
@if $tailTop != 0 {
margin-top: -$tailTop;
}
}
@mixin _decorateLeft($img, $tailLeft) {
background-position: 0 0;
left: 0;
@if $tailLeft != 0 {
padding-left: $tailLeft;
margin-left: -$tailLeft;
}
}
@mixin _decorateRight($img, $tailRight) {
background-position: 100% 0;
left: 50%;
@if $tailRight != 0 {
padding-right: $tailRight;
}
}
@mixin decorate($img: false, $tailTop: 0, $tailRight: 0, $tailBottom: 0, $tailLeft: 0, $left: false, $right: false) {
@if $left == false {
// Если классы для вспомогательных элементов не указаны,
// декорируем с помощью псевдо-элементов
&:before, &:after {
// Общее
content: '';
@include _decorate($img, $tailTop);
}
&:before {
// Левая часть
@include _decorateLeft($img, $tailLeft);
}
&:after {
// Правая часть
@include _decorateRight($img, $tailRight);
}
} @else {
// Классы для вспомогательных элементов указаны,
// декорируем их
.#{$left}, .#{$right} {
@include _decorate($img, $tailTop);
}
.#{$left} {
@include _decorateLeft($img, $tailLeft);
}
.#{$right} {
@include _decorateRight($img, $tailRight);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment