コーディング

【めざせSassマスター】~奥深いアンパサンド~

  • このエントリーをはてなブックマークに追加

 

こんにちはコバヤシです。

先日、傾倒している作家の瀬尾まいこさんの本屋大賞受賞記念サイン会に初参戦してきました。

サイン会でサインをいただいている間なにを話そうかと、前日の夜に布団の中で何度も考え、楽しみにして当日をむかえたのですが緊張のあまり

「ず、ずっとファンで、、、本屋大賞おめでとうございます、、、(なぜか出てくる涙)!!!」

しか言えず、何か言い直そうにもどもりにどもり、、、、握手もしてもらったのですが、手もガクブルで、、、、。

結局思いの丈を何も言えずに大変後悔しました。

今度はファンレターでも書いていきたいと思います。

さて、話は変わりまして、本日はSassお勉強シリーズ第2弾!

アンパサンドについてご紹介したいと思います。アンパサンドって名前がもうかわいいですよね。(あんぱんじゃないよあんぱだよ)

Sassってなーに?って説明は前回のブログくどくどとしたので、お手すきの際にそちらを読んでいただければと思います。

【めざせSassマスター 】DreamWeaver でSassをコンパイル

&と書いてアンパサンド

アンパサンドとは一言でいうと親要素の継承です。はい、意味不明ですね。

簡単に説明すると……

Sassでネストして(階層化して)記述したときに、子階層に&を付けるだけで親になっているセレクタ({}の外側の人のお名前)をそのまま引っ張ってこられるのです。

これだけ聞くとどこが便利なのか……と思われるかもしれないので、実例はこちら↓

【.menu(なにかのul的なやつ)がsectionの中に入ったときのwidthをアンパサンドで書いた場合】

 

てきとう書いたので、記述の内容自体にはいろいろつっこみどころがありますが……おわかりでしょうか?!

普通にcssで書いていたとしたら長々となるところがスタイリッシュに!!!!!!

便利でしょう。

 

擬似クラスにもあんぱさんど

ちなみに擬似クラスにもつけられるのです!!

【aタグをhoverしたときの動作をアンパサンドで書いた場合】

 

便利すぎる’&’

 

とっても当たり前のことですが、クラス名を手打ちするのってめんどくさいなって思うこと多々あるのです。

機械的には「なんかまえに書いたやつだよ」で認識できないのですから、打たなくてはいけないのが当たり前ですが、人間からすると「さっきも打ったのに〜〜〜〜」と思ってしまうのです。(横着モノなもので)

その点において&は利点ありすぎますね。

 

 

まだまだなんとも使いこなせていない感がすごいですが、頑張ります。

みなさまもあんぱんと牛乳でも楽しみながら&フル活用に挑戦されてみてはいかがでしょうか?(むしろ便利すぎる活用法を教えてください)

 

それではまた次回お会いしましょう~~~(*’▽’*)

  • このエントリーをはてなブックマークに追加