Front-EndCSS/SASS

SASS Nesting(중첩)

sass

해당 코드가 있는 Github 바로가기01
해당 코드가 있는 Github 바로가기02

Nesting(중첩)

중첩은 반복을 제거하고 스타일링에 분명한 DOM관계를 보여줌으로서 코드를 효율적으로 만듭니다.

확장자가 SCSS, SASS 일 때 문법이 다른데,
SCSS파일의 경우는 기존의 CSS의 문법과 동일합니다.

1
2
3
4
5
6
.parent {
  color: blue;
  .child {
    font-size: 12px;
  }
}

SASS파일의 경우 {}를 쓰지 않고 들여쓰기로 구분합니다. ;도 쓰지 않습니다.

1
2
3
4
.parent
  color: blue
  .child
    font-size: 12px

위의 SCSS와 SASS의 CSS 컴파일 결과는 같습니다.

1
2
3
4
5
6
7
.parent {
  color: blue;
}
.parent .child {
    font-size: 12px;
}

속성에 관련한 Nesting :

1
2
3
4
5
6
7
.parent {
  font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}

컴파일 결과

1
2
3
4
5
.parent {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-decoration: none;
}

& : 부모 참조 선택자. 중첩된 구조에서 사용합니다.

1
2
3
.button
  &:hover
     background: skyblue

컴파일 결과

1
2
3
.button:hover {
  background: skyblue;
}

@extend : 선택자 상속. 그룹핑 개념으로 선언된 다른 규칙의 내용을 상속받습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$btn-radius: 4px
$btn-align: center
$btn-gap: .6em
$btn-bg: #fe9977
.button
  display: inline-block
  padding: $btn-gap $btn-gap
  background: $btn-bg
  text-align: $btn-align
  &:hover
    background: skyblue
.button-error
  @extend .button
  color: #fff
  border: 3px solid green

컴파일 결과

1
2
3
4
5
6
7
8
9
10
11
.button, .button-error {
  display: inline-block;
  padding: 0.6em 0.6em;
  background: #fe9977;
  text-align: center; }
  .button:hover, .button-error:hover {
    background: skyblue; }
.button-error {
  color: #fff;
  border: 3px solid green; }

Share