Errorful Sass Selector

A guide on common mistakes when using Sass selectors

August 23, 2024

.test {
  &.test1 {
    width: 100px;
    height: 100px;
    background-color: black;
  }
}
-> .test.test1

.test2 {
  .test3 {
    width: 100px;
    height: 100px;
    background-color: yellow;
  }
}
-> .test2 .test3

이렇게 작성했을때 test와 test1은 형제 관계이며 test2와 test3은 부모 자식의 관계를 가져야함

단 아래와 같이 공백을 넣으면 부모자식 관계를 가지도록 컴파일 할 수가 있음. 다만 일반적으로 & 다음에 공백을 넣으면 가독성이 떨어지므로 &은 형제와 가상선택자일때만 사용함

.test {
	& .test1 {
	}
}
-> .test .test1

부모 관계를 나타내고 싶으면 아래와 같이 사용하는것이 구분하기 쉬움

.test {
  .test1 {
  }
}

.test .test1 {
}