[0919 TIL] scss 간단히 알아보기

중첩문의 지원

.container {
  display: flex;
  .item {
    background-color: red;
    > span {
      background-color: blue;
      &:hover {
        background-color: green;
      }
    }
  }
}

이러한 scss는 아래와 같이 변경될 수 있다.

.container {
  display: flex;
}
.container .item {
  background-color: red;
}
.container .item > span {
  background-color: blue;
}
.container .item > span:hover {
  background-color: green;
}

&연산자

&연산자는 상위부모태그를 가져온다.

따라서 앞에서 본 &:hover의 경우도 span:hover로 변경된것을 확인할 수 있다.

$연산자

$는 변수를 만들어주어 재사용이 가능하게 한다.

.container {
  .content {
    $size: 200px;
    width: $size;
    height: $size;
    @at-root .header {
      width: $size;
    }
  }
}

유효범위는 선언된 중괄호 내부이다.

정의한 변수는 사용하고 싶지만 root에 정의를 하고 싶은 경우 @at-root를 사용하게 된다면, 최상위의 header에 적용이 되는걸 알 수 있다.

!global

기존에 쓴 root 변수를 덮어쓸수 있으므로 주의해야한다.

.box-a {
  // !는 flag라고 부르며 글로벌이다.
  $h: 200px !global;
  width: $w;
  height: $h;
  margin: $w;
}

!default

$primary: blue;
.box {
  $primary: orange !default;
}

기존에 할당된 값이 변수에 있다면 할당된 값을 사용한다.