Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
【CSS】float指定がある要素の親要素に高さをもたせる方法。
divなど、要素をfloatさせると親要素の高さが0になってしまうが、これだと都合の悪いことが多々ある。 親要素にも高さをもたせ、次に続く要素達の位置を正しく配置するためには、 floatさせた要素の最後、ようは親コンテナの擬似要素である「:after」に「clear: both;」を適用してやればOK。 具体的には下記の通り。 <div class="container"> .container:after { content: " "; display: block; visibility: hidden; height: 0; clear: both; } contentで空要素を作成し、ブロック要素を指定、高さを0に設定し、visibilityで念のためコンテンツを非表示に設定。これにclear:bothをかけてやることで 親要素の高さも子要素に応じて変動してくれるようになる。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
