#6 - SCSS 중첩 - 벗어나기 (@at-root)

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

변수($)는 선언된 영역( { } 대괄호 영역)에서만 동작한다.

때문에 동일 속성을 사용하고 싶으나 컨텐츠가 외부에 존재할 경우, 중첩 벗어나기를 사용한다.

SCSS

.class-top {
  $per100 : 100%;
  $per50 : 50%;
  
  width : $per100;
  height : $per50;
  
  .class-in { 	
    width : $per100;
    height : $per50;
  }
  
  @at-root .class-out {
    width : $per100;
    height : $per50;
  }
}

Compile 된 CSS

.class-top {
  width: 100%;
  height: 50%;
}
.class-top .class-in{
  width: 100%;
  height: 50%;
}
.class-out {
  width: 100%;
  height: 50%;
}