문법 - 중첩, 상위 선택자 참조, 중첩 벗어나기, 중첩된 속성정의

1. 중첩

Sass는 중첩 기능을 사용할 수 있다.
상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있다.

/* SCSS */
.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

 

 

2. Ampersand (상위 선택자 참조)

중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환한다.

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

.btn {
  position: absolute;
}
.btn.active { /*한칸 떨어져 있지 않으면 일치 선택자이다.*/
  color: red;
}
.list li:last-child { /*가상 선택자이다.*/
  margin-right: 0;
}

 

 

3. @at-root (중첩 벗어나기)

중첩에서 벗어나고 싶을 때 @at-root 키워드를 사용한다.
중첩 안에서 생성하되 중첩 밖에서 사용해야 경우에 유용하다.

.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}

.list li {
  width: 100px;
  height: 50px;
}
.box {
  width: 100px;
  height: 50px;
}

.box클래스는 .list클래스에서 사용할 변수 값을 받고 컴파일 될때는 독립적으로 따로 분리된 클래스로 인식하게 하는것이다. $w 와 $h는 .list클래스 안에서 정의가 된 것이기 때문에 list클래스 안에서 값을 받아와야한다.

 

 

 

4. 중첩된 속성

font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들을 다음과 같이 사용할 수 있다.

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-bottom: 40px;
  padding-right: 30px;
}