親スタイルを参照するSass mixin

Question

アンパサンド&を使用して親セレクタを参照できますが、親スタイルを参照するソリューションはありますか？

私はこのような何かできるようにしたいと思います：

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

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

    @include copy(&); 
} 

：私はどこかと非常に近い値を得ることができます

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

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

：

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

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

    @include copy; 
} 

と出力を。 ..しかし、Sassは@media内からアウターセレクター@extendを許可していないのでそれは悪くないでしょうk。しかし、メディアのクエリを使用していない場合は、

Sassがそれを行うことができない場合、将来追加される可能性がありますか、あるいは別のCSSプリプロセッサで行うことができますか？

Answer 1

はいあなたはアンパサンドを使用することができますが、あなたは@media内から外セレクタを@extendないかもしれません

Answer 2

詳細はhttp://thesassway.com/intermediate/referencing-parent-selectors-using-ampersandを参照してください。同じディレクティブ内の@extendセレクタだけを することができます。

@mediaでは拡張が機能しません。 （理にかなって、何延びると同じように、CSSで他のクラスにクラスを追加されないので：

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

ことがあるのxDでのメディアクエリで動作するべきかを見るのは興味深いだろう

。

とにかく、それらのCSSルールを直接書かなければならないかもしれませんが、おそらくatmとは思えない良いアイディアがあるかもしれません。

あなたがミックスインで述べたネストは、ペン：http://codepen.io/anon/pen/oLEROb

@mixin size() { 
    background: blue; 

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

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

（私が最初に私はそれがだと思った、これはあなたの問題ではないと思います）

Answer 3

私は、これはあなたがしたいですかはわからないが、私は解決策は、多分あなたのために便利ですが見つかりました：

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; 
    } 
}