SASS：メディア画面の最適化

ご挨拶！



約1か月前、 @media screen



を最適化するというアイデアを提案する記事を書きました。 アイデアは、すべての画面の値を1行で書き込むことができるようにすることです。 詳細については、 こちらをご覧ください 。 コメントの大部分は実装に関する批判であり、残念ながら誰もアイデアを投げませんでした。 しかし、もしあなたが他方を見れば、あなたはあらゆる批判からアイデアを得ることができるので、読者の意見に基づいて、私は次のようにミックスインを書く目標を自分自身に設定しました：

• 読みやすい（最大繰り返しsass / scss / css構文）;
• 保守が容易です（そのため、1年でそこに書かれていることを理解できます）。
• 柔軟（ @media
  
  
  
  記述の最大数のサポート）;

何が起こったのか見てみましょう（ Githubリポジトリ ）！



構文

 .class{ @include media($properties, $orientation); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メディアミックスインは、$プロパティと$方向の2つのパラメーターをサポートします。

$プロパティ -CSSルールの配列。

$ orientation-画面の向き（オプション）。

$プロパティ

 .class{ @include media(( width: 100%; height: (lg: 800px, md: 600px, sm: 300px), transform: (all: translateX(100px) translateY(100px), sm: translateX(50px) translateY(50px)), color: (sm-md: $white, md-lg: $gray), font-size: (320: 12px, min-480: 18px, 480-md: 24px, print: 14pt) )); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードをさらに詳しく分析してみましょう...



$ propertiesパラメータは配列であるため、すべてのプロパティが（）に取り込まれます。

 width: 100%;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべての画面の通常のルール。 にコンパイルする

 .class{ width: 100%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに興味深い：

 height: (lg: 800px, md: 600px, sm: 300px)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、最大幅がlg 、 mdおよびsmの画面の高さについて説明します（開発者が設定します。詳細は後ほど説明します）。



コンパイル結果：

 @media only screen and (max-width: 1024px) { .class{ height: 800px; } } @media only screen and (max-width: 768px) { .class{ height: 600px; } } @media only screen and (max-width: 640px) { .class{ height: 300px; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以下のコードにも注意してください。

 transform: (all: translateX(100px) translateY(100px), sm: translateX(50px) translateY(50px))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、 すべての画面がありますが、これらはすべて画面であると推測したと思います。 幅：100％など、 すべてのルールと通常のルールには根本的な違いがあります。 しかし、それについてはもう少し後で。

 color: (sm-md: $white, md-lg: $gray)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、可能な限り柔軟にmin-width



とmax-width



間の画面の範囲を接続しようとしました。 つまり 上記のコードは、最小幅sm （640）-最大幅md （768）をコンパイルし、この範囲の画面では、テキストの色を白、またはmd （768） -lg （1024）のグレーに設定します。



コンパイル済みオプション：

 .class{ @media only screen and (min-width: 768px) and (max-width: 1024px) { color: gray; } } .class{ @media only screen and (min-width: 640px) and (max-width: 768px) { color: white; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

特定の画面だけに頼ることができない場合もあります。 したがって、カスタム幅を動的に設定することが可能です。 また、最大幅ではなく最小幅を突然指定する必要がある場合、またはその逆の場合、この可能性もあります。

 font-size: (880: 12px, min-480: 18px, 480-md: 24px, print: 14pt)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初の画面はmax-width：880pxです。 デフォルトでは、最大幅が固定されています（簡単に変更できます）。 この画面では、 font-size: 12px;





2番目のmin-480画面は、最小画面幅480px（プレフィックスmin-）から開始することを示し、その結果、480pxより広いすべての画面でfont-size: 18px



になります。



480-md -480pxのカスタム最小サイズと最大md （768）を作成します。 つまり これは、前の例のように、任意の値のみを持つ画面範囲の変形です。



480-768と入力すると、-288pxの画面が表示されることに注意してください。 「-」記号はマイナスとして機能します。 したがって、このような例は、「-」を使用して操作を意図的に記述しない限り、「480-768」を引用する価値があります（+、*、/も機能します）。

 print: 14pt
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

print-不変のパラメーターであり、印刷を目的としています。

 @media print { .class{ font-size: 14pt; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この段階ですべてが明確になっていることを願っています...そうでない場合は、コメントで喜んで説明します。

$方向パラメーターに移りましょう

ここではすべてがはるかに簡単です。 画面の向きであるlandscapeとportraitには2つのオプションがあります。 実際には、必要に応じて、これらの値は2番目のパラメーターで規定されています。

 .class{ @include media(( width: 100%; height: (all: 100%, md: 50%) ), portrait); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、以下が得られます。

 .class{ width: 100%; } @media only screen and (orientation:portrait){ .class{ height: 100%; } } @media only screen and (max-width: 768px) and (orientation:portrait){ .class{ height: 50%; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、 すべてのルールと標準ルールの違いを明確に見ることができます。 幅が100％の場合、ルールはどのような状況でもすべての画面に該当します。 allの場合、 ポートレート / ランドスケープの向きのすべての画面。

設定

編集する必要がある2つの標準変数は、 $ breakpointsと$ media-directionです。 デフォルトでは次のようになります。

 $breakpoints: ( lg: 1024, md: 768, sm: 640 ) !default; //-   $media-direction: max !default; -    (max/min)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

つまり 必要な名前、サイズ、初期方向（ min / max ）を使用して適切な数の画面を作成するには、自分に都合の良い場所に新しい変数を作成する必要があります。

 $breakpoints: ( desktop: 1280, ipad: 1024, tablet: 768, mobile: 640 ); $media-direction: min;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

始めるにはこれで十分です。



このミックスインは他にどのように使用できますか？



$ propertiesパラメータを変数に入れると、すばらしい機能を得ることができます。 例：

 $title-style: ( line-height: (lg: 24px, md: 20px, sm: 16px), font-size: (lg: 20px, md: 16px, sm: 12px;), text-align: (all: left, sm: center) ... ) .block{ h2{ color: gray; @include media($title-style); } h3{ color: black; @include media($title-style, landscape); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ある種の拡張クラスを取得します。 同意する、それは非常に便利です。

まとめると

長所

• 読みやすい-コードはできるだけCSS構文を繰り返します。
• メンテナンスが簡単-画面は非常に明確に記述されており、コードを理解するのに問題はありません。
• 柔軟性-すべてのスクリーン、スクリーン範囲、最小/最大幅の@media screen
  
  
  
  を動的に記述する機会を得ました。いつでもカスタム幅を規定する機会があり、またコードから逸脱することなく、印刷のルールを設定します。

短所

• 画面の高さの説明はありません。 私はまだこの部分に到達していません。もしこのミックスインがあなたにとって興味があるなら、私は間違いなくそのような機会を追加します。 コメントを書くことを忘れないでください。そうすれば、これがあなたにとってどれほど関連性があり、役に立つかを理解できます。
• 異なる画面に@include mixin
  
  
  
  を登録する方法はありません。 現時点では、Sassを使用して上記のmixinで実装するこのような機会は基本的に不可能です。 これがどれほど重要であるか、そのような機能を犠牲にするべきかどうかを決めるのはあなたに任せます。 個人的には、これはまったく重要ではありません。これは、 @media screen
  
  
  
  内に@include mixin
  
  
  
  を指定したことを思い出せないからです。

おわりに

目標は達成されたと思います。 Mixinは非常に便利で簡潔であることがわかりました。



あなたが私に同意しない場合は、コメントを書いてください。 いずれにせよ、私は喜んでこのミックスインを改善するためのあなたのアドバイスに耳を傾けるか、あなたの批判から有用な何かを抽出しようとします。



PS Githubリポジトリから mixinをダウンロードできます。 _mixin.scssは必要なファイルです。 package.jsonファイルには、Gulpのプラグインも含まれています。

• gulp-autoprefixerは必要に応じてブラウザーのプレフィックスを追加します。
• gulp-group-css-media-queriesは @media screen
  
  
  
  完全にグループ化し@media screen
  
  
  
  。
• gulp-minify-cssはcssを最適化します。このプラグインが必要であると言えます。

webpackやその他のコレクターでは、類似物を簡単に見つけることができると確信しています。



ご清聴ありがとうございました！