2016-08-06 6 views
3

親参照元セレクタ「&」については誰でもこの質問に答えることができます。SCSS "&"とその参照先

この場合、「&」とは何ですか?

 

    //Case 1 

    .parent { 
     & > ul { 
     color: red 
     } 
    } 
    //Case 2 

    .parent { 
     & > ul { 
     & > li { 
      color: blue; 
     } 
     } 
    } 
    //Case 3 

    .parent { 
     & > ul { 
     & > li { 
      color: blue; 
      &:hover { 
      color: pink 
      } 
     } 
     } 
    } 

+0

これはドキュメントにあります。 –

+3

[&とは何か]の可能な複製'&.sub-title'はscssで指定されていますか?](http://stackoverflow.com/questions/9988558/what-does-in-sub-title-indicates-in-scss) – andreas

答えて

11

答えは、とにかく見つけるのは簡単ですが、:&は、親セレクタのプレースホルダです:

.parent { 
    & > ul { 
    color: red 
    } 
} 

.parent > ul { 
    color: red 
} 

一般的な使用のように同じですケースは擬似クラスです。例:

.link { 
    &:hover { 
    color: red 
    } 
} 

例の良い説明はここにあります:https://css-tricks.com/the-sass-ampersand/

+0

「& '.class-name {&-foo'はハイフンを含むだけですか? – FlavorScape

+0

@FlavorScapeこれは連結演算子ではないので、これは可能ではないと思います... – andreas

関連する問題