[Sass,@extend]Sassの@extendの使い方。Ver2.1.1オレだけ分かってればいいWebメモHOMEこのサイトについて連絡してみるサイトマップホームWEBcss[Sass,@extend]Sassの@extendの使い方。Compass今回はSass行くよ!@extend行くよ!@mixinとどう区別したらいいのか分からない!って人もヒントになればいいと思うよ!てか答えはまとめに書いたよ!@extendの基本的な使い方そもそも@extendっていうのはセレクタの継承が目的で、なんども同じことを書くのは止めようねってことだと思います。#ccc;}のようになり、.hogeのborderとmarginを何度も書かなくて済むわけですね。そこでちょっとレベルアップしてみましょう。@extendをPlaceHolderクラスにしてみる先ほどの例で言うと.hogeはCSSに出力しなくていい場合も出てきます。要するに.hogeを変数っぽく使うわけです。#ccc;}%hogeのように頭に「%」を付けるのをPlaceHolderクラスと言い、hogeは出力されなくなります。@extendも「%」を付けるのを忘れずに。まとめ実はこの使い方、@mixinの使い方その物だとお思いでしょうが、@mixinでのPlaceHolderクラスのような使い方はNGらしく、@mixinは変数を備えた使い方をしなければならないようです。「[Sass]@mixinでスタイルを使いまわしてもっと楽しよう」の後半部分が正解。Sassって奥が深いですね。関連記事[CSS]transform-styleとかperspectiveに後ろ髪を引かれてたからやってみた天気悪いっすね下山です。寝ても覚めても納期に追われてます。CSS3から新登場のtransform-styleとかpers...記事を読む[CSS]googleマップをレスポンシブに表示したい気付けば4月。今月また歳を取ります。いうわけで書こうと思ってて忘れていたネタを2年越しに思い出したので書きます。パララックスとか使うと特に。...記事を読む[CSS]olの番号に括弧を付けてみた。正確にはolの番号に括弧は付けれらないよね。忙しくなるとこのブログの存在を忘れるのが特技です。いえ、特技と言うほどのものではありません。今回はol、...記事を読む[CSS3]column-countで紙面デザインのようなテキストレイアウトにしてみよう5ヶ月ぶりの更新ですの。サボってたわけじゃないの。これには話せば長~~~くなるようなストーリーがありまして・・・。いう訳で...記事を読む[CSS]ディスプレイサイズが変わっても背景画像を画面いっぱいに表示する背景画像を画面いっぱいに表示する=jQueryって思われがちですけどCSSで十分いけまっせ。言ってもbackgroundで...記事を読む[CSS,rem,Sass]remとか言う単位とSassで思い通りのfont-sizeライフを送ればいいと思うの。remと聞くとレム睡眠しか思い浮かびません。体は眠っているのに脳は活発に稼働しているだなんてニンゲンの神秘を感じてしまいますが、今回...記事を読む[CSS,CSS3]box-sizing(border-box)でborder、paddingを気にしないスローライフな生活を送ろう!そんな大層なことですか。生活に絡んでくるようなことですか。楽になるんだからいいじゃない。Fireworksで...記事を読む[css,css3,table]レスポンシブデザインでのテーブル(table)の扱いをまとめてみたレスポンシブデザインで困るのがテーブル(table)ですよね。処理しようか迷うところです。今回はテーブル(table)を...記事を読むスポンサーリンク[CSS]背景にビデオを配置して全画面で表示するよ![CSS,rem,Sass]remとか言う単位とSassで思い通りのfont-sizeライフを送ればいいと思うの。