[SASS/SCSS] 중첩과 상위 선택자 참조

SASS/SCSS에서 중첩이란?

CSS에서 style을 적용할 때 .container .inner h1 {}과 같은 방식을 사용합니다. 하지만 class들이 많아지고 태그들이 자식의 자식의 자식의....처럼 많아지는 경우가 생깁니다. 그렇게 된다면 .container 자식선택자 자식선택자 자식선택자 자식선택자 {} 점점 길어질수록 가독성은 떨어지면서 자연스럽게 스타일을 수정할 때 원하는 곳에 자리를 찾는것이 힘들어지게 됩니다. 이를 좀 더 수월하게 할 수 있는 방법이 중첩입니다.

[예시]

SCSS는 코드블럭이 적용되지 않으므로 사진으로 대체

/* CSS */
body p {
  color: blue;
}
body p strong {
  font-size: 20px;
}
body p strong span {
  font-weight: 500;
}

이처럼 태그 중괄호 안에 태그 or class로 사용해서 style를 적용시킬 수 있습니다.

상위 선택자 참조

중첩 안에서 & 키워드는 상위 선택자를 참조해서 치환합니다.

[예시]

SCSS는 코드블럭이 적용되지 않으므로 사진으로 대체

/* CSS */
div button {
  font-size: 12px;
}

div button.active {
  background-color: royalblue;
}

div button:hover {
  cursor: pointer;
}

button 태그 안에서 &를 사용했으므로 & = button이 되는것입니다.

이처럼 다른방식으로도 활용할 수 있습니다.

SCSS는 코드블럭이 적용되지 않으므로 사진으로 대체

/* CSS */
.fs-small {
  font-size: 14px;
}

.fs-medium {
  font-size: 16px;
}

.fs-large {
  font-size: 18px;
}