レイアウト・パーツで使える | Web制作者のためのSassの教科書 - 公式サポートサイト
一覧に戻る « 前 次 » 第5章 現場で使える実践Sassコーディング 5-3 レイアウト・パーツで使える clearfix を @extend で活用する $supportIE: true; // IE非対応の場合 false .clearfix { @if $supportIE { *zoom: 1; } &:after { content: ""; display: table; clear: both; } } .item { @extend .clearfix; background: #eee; .image { float: left; height: 100px; } .text { float: left; } } .clearfix, .item { *zoom: 1; } .clearfix:after, .item:after { content: ""; dis
スタイルの継承ができる@extend | Web制作者のためのSassの教科書 - 公式サポートサイト
.box { margin: 0 0 30px; padding: 15px; border: 1px solid #ccc; } // .box で使ったスタイルを継承 .item { @extend .box; } .box, .item { margin: 0 0 30px; padding: 15px; border: 1px solid #ccc; } .btnBase { text-align: center; margin: 0 0 10px; a { display: block; padding: 10px 20px; background: #999; color: #fff; &:hover { background: #ccc; color: #333; } } } .imgL { float: left; margin-right: 15px; } @import
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
