メディアクエリの外にスタイルを取得するには、以下のように拡張しますか？

Question

は、これが働いていなかった理由を把握するためにしばらくかかった：

@md: ~"only screen and (min-width: 48.9375em)"; 
.col-2 { width: 50%; } 
.block1, .block2 { 
    @media @md { 
     &:extend(.col-2, .pull-left); 
    } 
} 

は、私が研究し、これが動作しない理由が分かりました。 :extend()は同じメディアクエリに含まれていないので、それを無視します。だから私はLessで次のように再作成するのですか？

.col-2 { width: 50%; } 
@media only screen and (min-width: 48.9375em) { 
    .block1, .block2 { 
     width: 50%; 
    } 
} 

編集：私はこの例では、それだけで.block1, .block2以内にその単一のスタイルを追加する方が速いだろう実現が、私は、私はメディアクエリ内のメディアクエリー外クラスのスタイルを必要とする同様の事例の多くの例を持っています別の要素のだから、これを行う最善の方法を考え出すことで問題は解決します。

Answer 1

正しく見つかったので、現在、メディアクエリ内にあるセレクタブロック内のメディアクエリの外にあるブロックのプロパティを拡張することはできません。この理由は、単純な言葉で言えば、:extendは、グループセレクタにはありません。 .col-2がメディアクエリ内でグループ化されていると、間違った動作が発生します。メディアクエリをセレクタグループにカンマ区切りの値として追加することはできません。

以下のスニペットのように、メディアクエリ内で必要なクラスを呼び出すことができます。

少ないコード：

@md: ~"only screen and (min-width: 48.9375em)"; 
.col-2 { width: 50%; } 
.pull-left { float: left; } 
.block1, .block2 { 
    @media @md { 
    .col-2; 
    .pull-left; 
    } 
} 

出力CSS：

.col-2 { 
    width: 50%; 
} 
.pull-left { 
    float: left; 
} 
@media only screen and (min-width: 48.9375em) { 
    .block1, 
    .block2 { 
    width: 50%; 
    float: left; 
    } 
}