意外に知らなかったSASSの機能

この本を読んでみたら意外と知らない機能や使い方がたくさんありました。 個人的に勉強になった部分をまとめてみようと思います。

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

親セレクタの参照 &

もともと知っていた使い方

.hoge {
    &.foo {
        color : red;
    }
}

知らなかった使い方

.hoge {
    body.foo & {
        color : red;
    }
}

というかこっちがベースの使い方で、 &.fooのほうが応用みたいに書いてある…。

@content

これは知っていたんですがめんどくさくて敬遠していたやつです。

@mixin hoge {
    .hogehoge {
        @content;
    }
}

@include hoge {
    margin : 10px;
}

で、これはplaceholderとかのベンダプレフィックスのとこなどで使えると思いました。

input::input-placeholder {
    color:#CCC;
}
input::-o-input-placeholder {
    color:#CCC;
}
input::-moz-input-placeholder {
    color:#CCC;
}
input::-webkit-input-placeholder {
    color:#CCC;
}

こうすればセレクタにベンダプレフィックスがつくけど中身は一緒見たいのを効率よく書けます。

@mixin input-placeholder {
    input::input-placeholder {
        @content;
    }
    input::-o-input-placeholder {
        @content;
    }
    input::-moz-input-placeholder {
        @content;
    }
    input::-webkit-input-placeholder {
        @content;
    }
}

@include input-placeholder {
     color:#CCC;
}

今日はこのへんで。