Sass 2 : Nesting, extend

📌 Nesting

Scss에서 한 셀렉터가 다른 셀렉터의 하위요소일 때, 상위요소의 셀렉터 괄호 안에 하위 셀렉터 적어 표현할 수 있다. 이를 Nesting 이라 한다.
관련있는 요소들을 한 클래스 안에 적으므로 관리하기 용이해진다.

일반 css

.parent .child

scss

.parent {
child
}

pseudo 표현

hover 등의 pseudo 클래스를 표현하고 싶을 땐 & 기호를 사용한다 (&없이 그냥 붙이면 하위요소 의미가 되므로 주의한다)

.parent {
	&:hover { color : ... }
    // 컴파일 후 : .parent:hover
}

.parent {
	:hover { color : ... }
    // 컴파일 후 : .parent :hover
}

📌 extend

% 기호로 임시 클래스 만들어 공통되는 css를 다른 클래스에 상속하게 할 수 있다.
일반 클래스도 상속하게 할 수 있으나, 임시클래스는 컴파일 되지 않으므로 코드가 깔끔해진다.

style.scss

%btn {
  width: 120px;
  height: 50px;
  padding: 5px 10px;
}

.btn-green {
  @extend %btn;
  background-color: green;
  color: white;
}
.btn-red {
  @extend %btn;
  background-color: rgb(209, 33, 33);
  color: white;
}

style.css (컴파일 후)
임시 클래스는 컴파일 되지 않음을 확인할 수 있다.

.btn-green {
  background-color: green;
  color: white;
}

.btn-red {
  background-color: rgb(209, 33, 33);
  color: white;
}