3段divをやめよう.scss

gistfile1.txt

%container_decoration {
    position: relative;
    content: " ";
    display: block;
    width: 100%;
}

@function middle-image-name($name) {
    @return $container-image-path + $name + "__middle.png";
}

@function head-image-name($name) {
    @return $container-image-path + $name + "__head.png";
}

@function bottom-image-name($name) {
    @return $container-image-path + $name + "__bottom.png";
}

@mixin container($name) {
    $middle-image-path: middle-image-name($name);
    $head-image-path: head-image-name($name);
    $bottom-image-path: bottom-image-name($name);

    width: image-width($middle-image-path);
    background-image: image-url($middle-image-path);
    background-repeat: repeat-y;
    margin-bottom: image-height($bottom-image-path);

    &:before {
        @extend %container_decoration;
        top: 0 - image-height($head-image-path);
        height: 100%;
        background-image: image-url($head-image-path);
        background-repeat: no-repeat;
    }

    &:after {
        @extend %container_decoration;
        height: image-height($bottom-image-path);
        background-image: image-url($bottom-image-path);
    }
}

.hoge_container {
    @include container(hoge);
    height: 100px;
}