あまり新しくないもの

新しさはそんなに求めず、自分のすきなことをやりたい人生だった

そこそこ使う気がするsassのmixinのメモを残しておきます

opacity(IE対策)

@mixin opacity($opacity) {
    $ieopacity: $opacity*100;
    opacity: $opacity;
    filter: alpha(opacity= #{$ieopacity});
    -ms-filter: "alpha(opacity=#{$ieopacity})";
}

ブロックのセンタリング

もちろん親要素にposition: relative;必要

@mixin center {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    margin: auto;
}

minのサイズ(IE対策)

@mixin minHeight($px) {
    min-height: $px;
    height: auto !important;
    height: $px;
}

@mixin minWidth($px) {
    min-width: $px;
    width: auto !important;
    width: $px;
}

display: inline-blck;(IE対策)

@mixin inlineBlock {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

1行に入りきらない時の末尾を三点リーダに変える

要素にwidth設定必要あり

@mixin overflowEllipsis {
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

keyframe-animationの設定用

@mixin prefixKeyframes($name) {
    @if $use-prefix-webkit {
        @-webkit-keyframes #{$name} {
            @content;
        }
    }
    @if $use-prefix-moz {
        @-moz-keyframes #{$name} {
            @content;
        }
    }
    @if $use-prefix-ms {
        @-ms-keyframes #{$name} {
            @content;
        }
    }
    @if $use-prefix-o {
        @-o-keyframes #{$name} {
            @content;
        }
    }
    @keyframes #{$name} {
        @content;
    }
}

呼び出しは次みたいな感じで。

@include prefixKeyframes('animation-name') {
    0% { }
    100% { }
}

なんか思いついたらまた書きます。