そこそこ使う気がする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% { } }
なんか思いついたらまた書きます。