Sass CSS 확장 기능

중첩

중첩 ^Nesting은 CSS의 문법을 응용하여, 선택자나 속성의 관계를 중첩 형태로 풀어낸 문법이다. 여기에는 선택자를 중첩하는 '규칙 중첩'과 속성을 중첩하는 '속성 중첩'이 있다.

규칙 중첩

CSS 규칙을 중첩하여 작성할 수 있다. 규칙 중첩 ^{Nested Rules}은 부모 선택자를 계속 반복하지 않게 해준다. 특히 하위 선택자를 많이 사용하는 복잡한 CSS 규칙을 간단하게 작성할 수 있으며, 그 구조를 한눈에 볼 수 있다.

#main p {
  color: #00ff00;
  width: 97%;
 
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

속성 중첩

CSS 속성에는 네임스페이스로 묶인 속성이 있다. 예로 font 네임스페이스는 다음의 속성을 포함한다.

• font- 로 시작하는 모든 속성
• font-size, font-family, font-weight, font-variant, font-style, font-cerning 등

(1)속성의 네임스페이스를 이용해 중첩하여 작성할 수 있다.²

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

(2)중첩 속성은 단축 속성 값의 일부로 작성할 수 있다. 단축 속성의 값을 나열하고 마지막에 중괄호 {}를 사용해 중첩 속성을 작성하면 된다.

.funky {
  font: 20px/24px fantasy {
    weight: bold;
    style: italic;
  }
}

.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
    font-style: italic;
}

특수 선택자

Sass는 CSS 선택자의 모든 형태 외에 두 가지 특수 선택자를 제공한다. 중첩 규칙에서 사용하는 '부모 참조 선택자'와 @extend 전용 선택자인 '플레이스홀더 선택자'이다.

부모 참조 선택자 &

중첩 규칙에서 &를 사용하여 부모 선택자를 참조할 수 있다.

(1)부모 참조 선택자와 다른 선택자를 결합하여 사용한다.³

• 가상 클래스 &:active, &:empty, &:first-child 등
• 가상 요소 &::after, &::selection, &::first-letter 등
• 아이디, 클래스, 속성 선택자 &#movie, &.active, &[type=radio] 등
• 접미사⁴ &-sidebar, &--default:hover 등

(2)부모 참조 선택자를 하위 선택자로 위치시킬 수 있다.

• .wf-loading &, [lang:ko] &, .page section & 등

(3)위 두 방법을 함께 사용할 수도 있다.

• .wf-loading &:before, [lang:ko] &#movie, .page section &:first-child 등

#main {
  color: black;
  a {
    font-weight: bold;
    text-decoration: none;
    &:hover { text-decoration: underline; }
    body.firefox & { font-weight: normal; }
  }
}

#main {
  color: black; }
  #main a {
    font-weight: bold;
    text-decoration: none; }
    #main a:hover {
      text-decoration: underline; }
    body.firefox #main a {
      font-weight: normal; }

부모 참조 선택자 &는 이전까지 중첩된 모든 상위 부모 선택자를 나타낸다.

플레이스홀더 선택자 %

Sass는 '플레이스홀더 선택자 ^{placeholder selector}’라는 특수한 형태의 선택자를 제공한다. #로 시작하는 아이디 선택자나 .으로 시작하는 클래스 선택자와 비슷하게 기호 %으로 시작한다.

이 선택자는 @extend 전용 규칙을 정의하고 호출할 때만 사용하는 특수한 선택자이다. 이 선택자를 포함한 규칙 그 자체는 CSS로 출력되지 않고, @extend로 이 선택자를 호출한 곳에서만 출력된다. 자세한 내용은 @extend 전용 선택자 글에서 확인한다.

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
 
.notice {
  @extend %extreme;
}