2016-10-24 11 views
1

は、あなたがこのSASSの定義(非現実的な例を)持っているとしましょう:SASSは要素指定をネストされたセレクタとしてサポートしていますか?

.class { 
    margin: 1px; 
    background: black; 
    color: white; 

    &:hover { 
     color: red; 
    } 
} 

a.class { 
    margin: 1px; 
    background: black; 
    color: yellow; 

    &:hover { 
     color: blue; 
    } 
} 

は今、私たちは、ネストされたセレクタと同じクラスのa仕様を置くことができますか?例えば。この(擬似コード)のようなもの:あなたはミックスインを書くことを考えるかもしれ

.class { 
    margin: 1px; 
    background: black; 
    color: white; 

    &:hover { 
     color: red; 
    } 

    // Some selector to show that the current class 
    // should be applied to this element (?) 
    a.& { 
     color: yellow; 

     &:hover { 
      color: blue; 
     } 
    } 
} 
+0

私はそれが可能だとは思いません。さらに、この特定のケースでは、元のクラスのものをまったく継承していないので、入れ子になることは無駄になります。最初のクラスから継承する場合は、 'a'に' @extend .class'を使用する方が良いでしょう。 – disinfor

+0

できません。 http://www.sassmeister.com/で遊ぶことができます。しかし、あなたの実際の目標は何ですか? – andi

+0

さて、特定のクラスのすべての要素を特定の方法でスタイル化したいが、クラスの要素がアンカーである場合は、1つのCSSプロパティのみを変更したい。 SASSが簡潔な方法でこれをサポートしているのであれば、私は不思議でした。 – Propaganistas

答えて

5

に役立ちます。その少し厄介ですが、それはうまく動作します。

.class { 
    color: yellow; 

    &:hover { 
     color: blue; 
    } 
    &[href] { 
     color: white; 

     &:hover { 
      color: red; 
     } 
    } 
} 

Working Fiddle

+0

これは素晴らしい例です! – disinfor

+0

@disinforありがとうございます! –

+1

'href'属性を使った素敵なハック! – Propaganistas

1

@mixin sample($color,$hovercolor) { 
     margin: 1px; 
    background: black; 
    color: $color; 

    &:hover { 
     color: $hovercolor; 
    } 
    } 

    .class{ @include sample(white,red)} 
    a{ @include sample(yello,yellow)} 

希望これは私が解決策を持っている

関連する問題