Sassの@at-rootをBEM記法で上手く使う方法 ~ Blockより親要素のクラスでElementとの子孫セレクタを作りたい

SassでBEM記法を使っていると、綺麗にコーディングできない場面が出てきていました。

どんな場面か。それはBlockよりも親要素のクラスでElementとの子孫セレクタを作りたいときです。これにはSassの「@at-root」を使うのですが、ネットで調べても中々思い通りの手法にたどり着けず、なんとか自分で使い方を理解し解決できた次第です。(コードにするとなんてことない内容なのですが…)

例えばどんな実装か

実装として、メインビジュアルの中身を以下2種類のどちらかに切り替える機能があるとします。

  1. 画像(<img>)
  2. 動画(<iframe>など)

これらをレスポンシブ対応する場合、CSSのプロパティは変えなくてはいけません。JavaScirptで動的にBlockのModifierクラスを付与して解決できたりしますが、CMSによってはサーバーサイドでクラスを吐き出してくれたりするので郷に従いたくなるときもあるでしょう。

コードやクラス付与状況の例

実際にコードの実装例です。以下のHTML(PHP)がメインビジュアル用のコードです。

「main-visual」Blockの外、<body>に「has-video」というクラスが付与されています。これはCMS側で「メインビジュアルには画像ではなく、動画を表示する」という設定がされている状況です。画像ならばbodyタグには「has-image」ですね。

それでは、この親要素(bodyタグ)のクラスを元にメインビジュアルのCSSを切り替える@at-rootを使用したコードを示します。

肝はやはり9行目の「@at-root」と「&」です。@at-rootは入れ子状態のセレクタを外に出す機能で、&(アンパサンド)は直前の親セレクタ名(今回で言えば”.main-visual”)を返す機能になっています。2つでクラス名を挟むと以下のCSSで出力されます。

こんな感じで、Blockより親要素のクラスでElementとの子孫セレクタを作ることができました。以上です。

(念のためですがこのコンパイルが通ったSassのバージョンは「3.4.23」です)


ちなみに今までの自分はこんな風に記述していました。コーディングしていたときは歯痒かったですね…。

そのほか「_has-video.scss」ファイル内に記述したりなど。わだかまりが一つなくなり良かったです。

最終更新日:2017年4月2日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/sass-at-root-bem/trackback/