Sass-Mixin, das übergeordnete Stile referenziert

Question

Wir können Eltern-Selektoren mit dem kaufmännischen Und-Zeichen & referenzieren, aber haben wir eine Lösung für die Referenzierung von übergeordneten Stilen?

Ich möchte in der Lage sein, so etwas zu tun:

@mixin copy { 
    &-copy { 
     @media (min-width: 300px) { 
      @context; // directive doesn't exist but illustrates the point 
     } 
    } 
} 

.foo { 
    font-size: 18px; 
    color: red; 

    @include copy; 
} 

und Ausgang:

.foo { 
    font-size: 18px; 
    color: red; 
} 

@media (min-width: 300px) { 
    .foo-copy { 
     font-size: 18px; 
     color: red; 
    } 
} 

Ich kann irgendwo ganz in der Nähe bekommen:

@mixin copy ($parent) { 
    &-copy { 
     @media (min-width: 300px) { 
      @extend #{$parent}; 
     } 
    } 
} 

.foo { 
    font-size: 13px; 
    color: red; 

    @include copy(&); 
} 

. ..aber weil Sass uns nicht erlaubt @extend einen äußeren Selektor von innerhalb @media das wird nicht wor k. Es würde, wenn ich nicht Medienabfragen jedoch verwenden würde.

Wenn Sass es nicht kann, wird es wahrscheinlich in der Zukunft hinzugefügt oder kann es ein anderer CSS-Präprozessor tun?

Answer 1

Ja Sie das Ampersand verwenden können, finden http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand für weitere Informationen

Answer 2

Sie keine äußere Wähler aus @media @extend kann. Sie dürfen nur @ Extender Selektoren innerhalb der gleichen Richtlinie.

So Verlängerung funktioniert nicht in der @media. (Was Sinn macht, da das, was erstreckt tut, ist fügen Sie einfach die Klasse auf die anderen Klasse in der CSS, wie:.

.element, .the-extended-class { 
    width: 200px; 
    height: 200px; 
    background: blue; 
} 

wäre interessant zu sehen, wie das mit einer Media-Abfrage drin xD funktionieren soll

Anyways, werden Sie entweder diese CSS-Regeln direkt zu schreiben, oder vielleicht gibt es eine bessere Idee, ich kann einfach nicht von atm denken.

Die Verschachtelung Sie über eine mixin erwähnt funktioniert gut, wenn es aus wie ein Versuch, Stift: http://codepen.io/anon/pen/oLEROb

@mixin size() { 
    background: blue; 

    &-small { 
    background: green; 
    width: 100px; 
    } 
} 

.element { 
    width: 200px; 
    height: 200px; 
    @include size; 
} 

(Ich denke, das nicht Ihr Problem ist, zuerst dachte ich, es war)

Answer 3

Ich bin mir nicht sicher, ob dies Sie wollen, aber ich fand vielleicht eine Lösung ist nützlich für Sie:

SASS

@mixin copy { 
    @content; 
    &-copy { 
    @media (min-width: 300px) { 
     @content; 
    } 
    } 
} 

.foo { 
    @include copy{ 
    font-size: 18px; 
    color: red; 
    } 
} 

OUTPUT

.foo { 
    font-size: 18px; 
    color: red; 
} 
@media (min-width: 300px) { 
    .foo-copy { 
    font-size: 18px; 
    color: red; 
    } 
}