意外に知らなかったSASSの機能
この本を読んでみたら意外と知らない機能や使い方がたくさんありました。 個人的に勉強になった部分をまとめてみようと思います。
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
- 作者: 平澤隆,森田壮
- 出版社/メーカー: インプレスジャパン
- 発売日: 2013/09/13
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る
親セレクタの参照 &
もともと知っていた使い方
.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; }
今日はこのへんで。