SCSS "&" und was es bezieht sich auf

Question

kann jemand beantworten diese Fragen über Elternreferenzierung Selektor "&".

Was ist "&" in diesen Fällen.

 

    //Case 1 

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

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

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

Answer 1

Die Antwort ist leicht zu finden, aber trotzdem: Der & ein Platzhalter für den Wähler Eltern ist:

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

ist die gleiche wie

.parent > ul { 
    color: red 
} 

Eine gemeinsame Nutzung Fall sind Pseudoklassen, zB:

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

Eine schöne Erklärung mit Beispielen finden Sie hier: https://css-tricks.com/the-sass-ampersand/