Ermitteln von Stilen außerhalb einer Medienabfrage mit weniger Ausdehnung?

Question

Es dauerte eine Weile, um herauszufinden, warum dies nicht funktioniert:

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

ich recherchiert und herausgefunden, warum das nicht funktioniert. Less :extend() ignoriert es, da sie nicht in der gleichen Medienabfrage sind. Also, wie erstelle ich das Folgende in weniger?

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

Edit: Ich weiß, es für dieses Beispiel schneller genau das einzelne Art innerhalb .block1, .block2 hinzuzufügen wäre, aber ich habe viele Beispiele für ähnliche Fälle, in denen ich die Stile einer Klasse außerhalb einer Medienabfrage innerhalb der Medienabfrage müssen eines anderen Elements. Also herauszufinden, der beste Weg, dies zu tun, löst das Problem.

Answer 1

Wie Sie richtig herausgefunden haben, ist es derzeit nicht möglich, die Eigenschaften eines Blocks außerhalb der Medienabfrage in einem Selektorblock innerhalb der Medienabfrage zu erweitern. Ich vermute, der Grund dafür ist, dass in einfachen Worten alles, was die :extend tut, ist Gruppe Selektoren, die hier nicht gemacht werden kann. Wenn die .col-2 in der Medienabfrage gruppiert ist, wird ein falsches Verhalten erstellt (und) eine Medienabfrage kann nicht als kommagetrennter Wert in einer Selektorgruppe hinzugefügt werden.

Sie können einfach die erforderlichen Klassen innerhalb der Medienabfrage aufrufen, wie im folgenden Snippet.

Weniger Code:

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

Output CSS:

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