全然ないけどsassの自作mixin

はい、今週もお疲れ様でした。というわけで、sassの自作mixinをずらずらっと書いていく

position一括指定

基本的にleftとかtopとかってabsoluteのときしか書かないんだけど、absolute指定した時点でleftかtopは確実に書くし、right、bottomも場合によっちゃ書くから、そのために複数行書くのめんどくさいよねってとこから作ったやつ。

mixin

@mixin pos($top: 0, $right: 0, $bottom: 0, $left: 0) {
    position: absolute;

    @if $left   != '' { left: $left; }
    @if $top    != '' { top: $top; }
    @if $right  != '' { right: $right; }
    @if $bottom != '' { bottom: $bottom; }
}

scss

.hoge {
    @include pos(10px,5px,10px,5px);
}

css

.hoge {
    position: absolute;
    left: 5px;
    top: 10px;
    right: 5px;
    bottom: 10px; }

前述の通り、top、left等で指定するのはposition: absoluteのときがほとんどだからabsoluteも一緒に宣言してる。便利。ちなみにこの、top、right、bottom、leftっていう引数の順番は、marginとかpaddingに合わせてあるから覚えやすい。

ベンダープレフィックス一括指定

大体compassで用意されてるけど、たまたま用意されてなかったりするときに使う、ベンダープレフィックス一括指定

mixin

$prefixs: -webkit-, -moz-, -ms-, -o-, '';

@mixin addPrefix($prop, $val) {
    @each $prefix in $prefixs {
        #{$prefix}#{$prop}: $val;
    }
}

scss

.hoge {
    @include addPrefix(border-radius,15px);
    }

css

.hoge {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px; }

始めにprefixの配列を宣言して、引数にもらったプロパティの接頭辞に全部ベンダープレフィックスつけるだけ。あんま使ってない。

スプライトシートのbackground-position自動計算

スプライトシートでコマアニメ作るとき、今までは各状態のbackground-positionを手と頭で計算して書いてたけど、そこ自動化できることに気付いたから書いた

mixin

@mixin posSprite($imgpath, $length, $label) {
    @for $i from 1 through $length {
        &.#{$label}#{$i} {
            background-position: 0 -#{image-height(#{$imgpath})/$length * ($i - 1)};
        }
    }
}

scss

.hoge {
    @include posSprite('icon_suika.jpg',3,suika);
}

css

.hoge.suika1 {
    background-position: 0 -0px; }
.hoge.suika2 {
    background-position: 0 -60px; }
.hoge.suika3 {
    background-position: 0 -120px; }

第一引数にスプライトシートのパス、第二匹数がコマ数、第三引数が各状態の接頭辞になるラベル。ちなみにこのmixinはスプライトシートが縦長の場合しか想定していない。スマホとかは読み込める画像の高さとか幅に制限があったはずだから横長にも拡張する必要があるかも。ちなみに便利なのは、わざわざ画像のサイズを調べなくても、image-height(又はwidth)(画像パス)で画像の高さ、幅を取得できることだ。sassすごい。もちろんだけど、指定したパスに画像がないと取得できない。ちなみに今回使ってる画像はアイコンの萃香ちゃん(180px*180px)です

テキストの背景画像置換(retina、ボタンマウスオーバー対応)

文言画像を置くときの方法は2種類あると思う

• 例1

html

<h1><img src="maintitle.png" alt="メインタイトルです" width="200" height=50" /></h1>

• 例2

html

<h1>メインタイトルです</h1>

scss

h1 {
    width: 200px;
    height: 200px;
    text-indent: -9999em;
    overflow: hidden;
    white-space:nowrap;
    background-image: url('maintitle.png');
    background-repeat: no-repeat;
    background-position: 0% 0%;
}

てな感じで。同様に、ボタン画像を置くときも上記のような二択があると思っていて、SEO的にどのくらい差が出るかは正直わからん。以前までは例1で書いて、ボタン画像の:hoverのときはbackground-imageのパスを書き換えてたんだけど、その場合プリロードしないとhover時に最初のリクエストが走るから一瞬ボタンが消えたようになって非常に嫌なので今は例2で書いて、ボタンの通常とhover時をスプライトで書き出してhover時はbackground-positionを書き換えるようにしている。で、例2のscssのコードは正直同じようなのばかりで書くのめんどくさいからmixinにした。

mixin

@mixin replaceImg($imgpath,$flagSP,$flagBtn){
    overflow: hidden;
    white-space:nowrap;
    text-indent: -9999em;
    background-image: url(#{$imgDir}#{$imgpath});
    background-repeat: no-repeat;
    background-position: center top;
    @if $flagSP == true {
        width: image-width(#{$imgpath})/2;
        height: image-height(#{$imgpath})/2;
        background-size: image-width(#{$imgpath})/2 image-height(#{$imgpath})/2;
    } @else {
        width: image-width(#{$imgpath});
        @if $flagBtn == true {
            height: image-height(#{$imgpath})/2;
            a {
                width: 100%;
                height: 100%;
                display: block;
            }
            &:hover {
                background-position: center bottom;
            }
        }
        height: image-height(#{$imgpath});
    }
}

scss

.hoge {
    @include replaceImg('icon_suika.jpg',false,true);
}

css

.hoge {
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999em;
    background-image: url(icon_suika.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    width: 180px;
    height: 90px; }
    body .hoge a {
      width: 100%;
      height: 100%;
      display: block; }
    body .hoge:hover {
      background-position: center bottom; }

第一引数が画像パス、第二匹数がスマホかどうかのフラグ(retina対応すべきか否か)、第三引数が、それがボタンかどうかのフラグ。ちなみに、ボタンの場合はスプライトシートが縦長かつ、通常とhover時の高さが同じ必要があるという制約がある。その内記事書くけど、compass sprite-mapとかでその辺は解決してけたらなぁと思う(CSS Sprite Helpers for Compass | Compass Documentation)。
で、解説すると、

    overflow: hidden;
    white-space:nowrap;
    text-indent: -9999em;
    background-repeat: no-repeat;
    background-position: center top;

ここは固定で入る。画像パスからbackground-imageとwidth、heightを設定し、もしflagSPが立ってたらサイズを半分にしてbackground-sizeも半分で書く。もしflagBtnが立ってたら、高さを半分にして中に置いてある(であろう)aタグを幅高さいっぱいにして、hover時にbackground-positionをずらす設定をする。

ふー疲れた……自分のメモがてらとはいえ、誰かが読んでくれるようになると嬉しいしモチベーションになるんだろうなぁ。

というわけで次は、やっと脱jQueryしたらメソッドが貧弱過ぎたのでちょこちょこ自作していくぜ、classManager編です。そのうちcompass sprite-mapも書きます。ではー