初心者でも分かるscssのメディアクエリをまとめる「mqpacker」の使い方
今回は、scssのメディアクエリをまとめる方法を探して試行錯誤していたけど、他のどの記事も説明が抜けてたり、ソースミスでエラーばっかりだった経験から、初心者でも1回で分かる「mqpacker」の使い方を徹底解説します。 今回の完成形 今回やりたいことは、Sass/Scssで下記のようにバラバラになったメディアクエリをまとめることです。 .test-1 { margin-top: 16px; font-size: 16px; } @media screen and (min-width: 600px) { .test-1 { margin-top: 24px; font-size: 18px; } } @media screen and (min-width: 960px) { .test-1 { margin-top: 32px; font-size: 20px; } } .test-2
Sassの変数とmixinで変更に強いメディアクエリをつくる ｜ Tips Note by TAM
レスポンシブWebデザインではメディアクエリ（media queries）を書くことが多くなります。通常のCSSではブレイクポイントを変更したくなったときに、すでに書いてしまった箇所を直していくのはとても大変です。 Sass（scss記法）を使えば、変数や@mixinを使うことで1箇所で管理することが容易になります。今回はSassでメディアクエリを管理する方法を紹介します。 ブレイクポイントを変数（マップ型）で定義する メディアクエリにはブレイクポイントと呼ばれる処理を変更する横幅を決めます。通常のSassの変数でブレイクポイントを定義した場合は以下のようになります。 $breakpoint-sm: 400px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 1000px !default; 今回は変数は変数でも、マップ型
レイアウト・パーツで使える | 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ページを開く
