2016-05-05 10 views
0

私はより多目的で簡単に編集できるようにSASSに変換する必要があるCSSコードがあります。私は達成するために必要SASSで複数のクラス名セレクタ

は以下の通りです:私はこのセレクタを持っている:

.responsive .selector, 
.responsive-no-touch .selector, 
.responsive-android .selector { 
    property: value; 
} 

は、どのように私はミックスインは.responsive.responsive-no-touch.responsive-androidをターゲットにすることができますし、私は.selector一部を記述する必要がありますか?

これは動作しません:

.responsive, 
.responsive-no-touch, 
.responsive-android { 
    .selector { 
     property: value; 
    } 
} 

私はLiferayのを使用していますし、このプラットフォームは、自動的にSASSとCSSをコンパイルします。

ありがとうございます。

答えて

2

あなたの例で、この種の場合、マークアップ:

<div class='responsive'> 
    <div class='selector'></div> 
</div> 

しかし、私はあなたがそのような何かを持って理解されるように:あなたが使用する必要がある理由です

<div class='responsive selector'> 
</div> 

.responsive, 
.responsive-no-touch, 
.responsive-android { 
    &.selector { 
     property: value; 
    } 
} 
+0

OMG、私はあなたが正しいと思います。私は親セレクタ '&'を見逃しました。 SASSの新機能は残念です。私は試してみる。 –

+0

@ MarcosPrezGudeを見てください。[こちら](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector)SASSのドキュメント – AleshaOleg

+0

ありがとうございます。私は過去にこのようなことを読んでいましたが、私は固執され、私の脳は崩壊しました。最初のものではないので、私はこの答えを正しいものとして受け入れますが、説明があり、他の答えよりも少ないアップフォースがあります。どちらも、評判が高まることの功績です。 –

3

あなたは以下を試しましたか?

.responsive, 
.responsive-no-touch, 
.responsive-android { 
    &.selector { 
     property: value; 
    } 
} 
+0

OMG、私はあなたが正しいと思います。私は親セレクタを逃しました。申し訳ありませんがSASSの新機能です。私は試してみる。 –

関連する問題