SCSS "&"와 그 의미를

Question

누구든지 상위 참조 셀렉터 "&"에 대한이 질문에 대답 할 수 있습니다.

이 경우 "&"은 무엇입니까?

 

    //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

대답은 어쨌든 쉽게 찾을 수 있지만 : 같은

.parent > ul { 
    color: red 
} 

일반적인 사용 같은

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

경우 : & 부모의 선택에 대한 자리 표시 자입니다 대/소문자 구분은 예 :

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

예제와 함께 좋은 설명은 여기에서 찾을 수 있습니다. https://css-tricks.com/the-sass-ampersand/