Sass 3.2でのメディアクエリの使用

Sass 3.2のリリースにより、オブジェクト指向CSS（OOCSS）の道は大衆へと進み始め、DRYの原則とプログラム的思考がもたらされました。 メディアクエリとOOCSSは、今日のフロントエンド開発に不可欠になっています。

新機能を見てみましょう

Sassには非常に便利な機能があり、広く知られているコンテンツはありません。 コンテンツをyieldと考えることができます。これにより、CSSをネストしたsass @mixinを定義できます。 これにより、貴重な時間を節約し、コードの繰り返しを減らし、メディアクエリでの作業を大幅に簡素化します。

仕組み

まず、デバイスのエントリポイントを決定する変数を宣言し、メディアクエリに抽象化レイヤーを追加する必要があります。 これを行うには、@ mixin respond-toを作成します。

$small: 320px; $large: 1024px; @mixin respond-to($media) { @if $media == handhelds { @media only screen and (max-width: $small) { @content; } } @else if $media == medium-screens { @media only screen and (min-width: $small + 1) and (max-width: $large - 1) { @content; } } @else if $media == wide-screens { @media only screen and (min-width: $large) { @content; } } } .block { float: left; width: 250px; @include respond-to(handhelds) { width: 100% ;} @include respond-to(medium-screens) { width: 125px; } @include respond-to(wide-screens) { float: none; } }​
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードは解読よりも読みやすく、即座に意味があります。たとえば、 メディアのみの画面と（最大幅：320ピクセル）および（向き：縦長）です。

すべての魔法はcontentです 。これにより、上記のメディアリクエストに従って適用するプロパティをCSSに渡すことができます。 将来どのようなデザインが必要になるかはわかりませんが、この抽象化により、これらの変更が発生したときにスタイルを簡単に更新できます。

Sassをコンパイルした後、必要なCSSを取得します。

 .block { float: left; width: 250px; } @media only screen and (max-width: 320px) { .block { width: 100%; } } @media only screen and (min-width: 321px) and (max-width: 1023px) { .block { width: 125px; } } @media only screen and (min-width: 1024px) { .block { float: none; } }​
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

たとえば、ipad-lanscape以外にCSSを使用する必要がある場合、バリエーションへの応答をペイントすることはできませんが、異なるデバイスに適応する新しい@mixinを作成します。

 $ipad-landscape: 980px; @mixin apply-to($ltgt, $device) { $extrema: null; @if $ltgt == less-than { $extrema: max; } @if $ltgt == greater-than { $extrema: min } @if $device == $ipad-landscape { @media only screen and (#{$extrema}-width: $ipad-landscape) { @content; } } } .block { @include apply-to(less-than, ipad-landscape) { background: black; } }​
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

どのような問題が発生する可能性があります

これらはすべて非常に優れており、興味深いインターフェイスを作成できますが、IEでは9番目のバージョン以下では動作しません。 この問題の解決策は、個別のスタイルファイルを生成することです。

 <!--[if lte IE 8]> <link rel="stylesheet" href="css/all-old-ie.css"> <![endif]--> <!--[if gt IE 8]><!--> <link rel="stylesheet" href="css/all.css"> <!--<![endif]-->
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

変数$old-ie: true;



はIEのファイルで宣言されています$old-ie: true;



必要な幅固定とメインスタイルファイルがインポートされます。 メインスタイルファイルでは、IE $ old-ie変数はデフォルトでfalseになります。 IE用に@mixinを作成し、適用先機能を拡張する必要があります。

 @mixin old-ie { @if $old-ie { @content; } } @mixin apply-to($ltgt, $device) { $extrema: null; @if $ltgt == less-than { $extrema: max; } @if $ltgt == greater-than { $extrema: min } @if $fix-mqs-ipad-landscape { @content; } @else { @media screen and (#{$extrema}-width: $device) { @content; } } } .block { @include apply-to(less-than, $ipad-landscape) { float: left; width: 70%; @include old-ie { content: ' ,     IE'; } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、メディアクエリ内での@extendの使用にはいくつかの制限があります。つまり、メディアクエリで@extendを使用する場合、同じブロックに表示されるセレクタのみを拡張できます。 たとえば、次のコードは正常に機能します。

 @media only screen and (max-width: 320px) and (orientation: portrait){ .error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このオプションは間違っています：

 .error { border: 1px #f00; background-color: #fdd; } @media only screen and (max-width: 320px) and (orientation: portrait) { .seriousError { @extend .error; border-width: 3px; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、@ extendにするまでスタイルに該当しないサイレントクラスを使用することにより、別の方法で行うことができます。

 //silent class %big { width: 20px; height: 20px; } .block_1 { @extend %big; } .block_2 { @include respond-to('large'){ @extend %big; } } .block_3 { @include respond-to('large'){ @extend %big; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

適切なコンパイル済みCSSを取得します。

 .block_1 { height: 20px; width: 20px; } @media screen and (min-width: 600px) { .block_2, .block_3 { height: 20px; width: 20px; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、コンパイルされたCSSを小さくし、個々のリクエストルールのCSSを結合することを望んでいます。次に例を示します。

 .profile-pic { @media screen and (max-width: 320px) { width: 100px; float: none; } } .biography { @media screen and (max-width: 320px) { font-size: 15px; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

受け取りたい：

 @media screen and (max-width: 320px) { .profile-pic { width: 100px; float: none; } .biography { font-size: 15px; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

代わりに、以下を取得します。

 @media screen and (max-width: 320px) { .profile-pic { width: 100px; float: none; } } @media screen and (max-width: 320px) { .biography { font-size: 15px; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Rails 3.1+とSprocketsを使用する場合、 sprockets-media_query_combiner jamを使用して、CSSルールを最適に組み合わせることができます。

メディアクエリをより便利に使用するために、 レスポンダープロジェクトで使用できる優れたジャムもあります。



タブレットまたは携帯電話でサイトを表示している訪問者は、間違いなく感謝します。