"&:hover" 에서 &의 의미

CSS로 컴파일할 때 외부 선택기로 대체된다는 의미

https://stackoverflow.com/questions/14553066/less-css-hover

https://medium.com/the-crazy-coder/what-scss-means-e448e2ac98d3

• & 뒤에 공백이 있는 경우.

.class1 { 
  & .class2 { 
     ... 
  } 
} 

//아래와 같다.
.class1 .class2 { 
   ... 
}

&는 .class1 를 요약한 것이다.

• & 뒤에 공백이 없는 경우

.class1 { 
   &.class2 { 
     ... 
   } 
} 

//아래와 같이 컴파일된다.
.class1.class2 { 
   ... 
}

 

 

• 의사 클래스 작성

.button { 
  &:visited { } 
  &:hover { } 
  &:active { } 
} 

//아래와 같이 컴파일 된다.
.button:visited { } 
.button:hover { } 
.button:active { }

 

 

• 클래스 연결

.button { 
  &__blue { } 
} 

//아래와 같이 컴파일 된다.
.button__blue { }