css - レスポンシブ SASS ワークフロー

Question

SASS で SCSS を組み合わせたレスポンシブ デザインをどのように扱っているか教えてください。主な質問は、メディア クエリについてです。

1) 次のように、ブレークポイント ミックスインを使用して、スタイル付き要素内に直接メディア クエリを記述していますか。

.element{

     width:40%;

     @media screen (min-width:700px){
           width:100%;
     }

     @media screen (min-width:1000px){
           width:50%;
     } 

}

// CSS

@media screen (min-width:700px){
    .element{
        width:100%; 
    }
 }

 @media screen (min-width:700px){
    .element2{
        width:50%; 
    }
 } 

2) または、それらを特別な別の部分ファイルに書き込んでいますか? たとえば、次のようにします。

/* _responsive_wide_screen.scss */

@media screen (min-width:1000px){

    .element{
        width:50%;
        display:inline-block;
    }   

   .element2{
        width:20%;
    }

 }

より高速に実行できるのはおそらく例 1 ですが、問題は要素ごとにメディア クエリ ステートメントが生成され、CSS ファイルのサイズがどんどん大きくなることです。このアプローチは避けるべきですか？

私は例番号 2 を使用していますが、ファイルを切り替えるのがあまりユーザーフレンドリーではない場合があります。ありがとう