[Sass 특징] @at-root

Sass 문법이 일반 CSS와 가장 큰 특징 중 하나는

중첩(Nesting)되어 사용되는 속성들이 있다.

 

1. @at-root 의 사용

기본적으로 부모 엘리먼트에서부터 중첩이 되어

css 내용을 작성한다.

.wrap{
   .cont{
      text-align:center; font-size:12px;
      p{text-align:left;}
      .lst{
         overflow:hidden;
         li{float:left;}
         
         .layer_test{border:1px solid #333; padding:10px;}
      }
   }
}

 

위와 같이 중첩된 내용들 중에 .layer_test를 기준으로 .wrap, .cont, .lst 와 같은

상위 요소들 안에서 사용은 되지만 불필요하게 상위 요소들을 타고

css를 사용하지 않아도 되는 영역의 경우

.wrap{
   .cont{
      text-align:center; font-size:12px;
      p{text-align:left;}
      .lst{
         overflow:hidden;
         li{float:left;}
      }
   }
}

.layer_test{border:1px solid #333; padding:10px;}

 

위와 같이 전혀 동떨어지게 Sass 문법을 작성해서 표현할 수 있다.

 

하지만 .layer_test영역이 실제 html 소스상에도 .wrap, .cont, .lst 안에 노출이 되는 영역이라면

위와 같이 Sass를 작성하다보면 작성해야할 css 내용이 많아지면

헷갈리는 경우가 생긴다.

 

이럴 때 사용하기 좋은 것이 @at-root 속성이다.

.wrap{
   .cont{
      text-align:center; font-size:12px;
      p{text-align:left;}
      .lst{
         overflow:hidden;
         li{float:left;}
         
         @at-root .layer_test{border:1px solid #333; padding:10px;}
      }
   }
}


/* CSS 출력 */
.wrap .cont {
  text-align: center;
  font-size: 12px;
}
.wrap .cont p {
  text-align: left;
}
.wrap .cont .lst {
  overflow: hidden;
}
.wrap .cont .lst li {
  float: left;
}
.layer_test {
  border: 1px solid #333;
  padding: 10px;
}

 

Sass 문법상에는 상위 요소들 안에 존재하지만

실제로 컴파일 된 css를 확인해보면 부모 요소를 타고 가는 것이 아닌

별도의 css로 작성이 된다.

 

2. @at-root의 응용1

위에서 작성한 문법과 같이

@at-root .layer_test{속성} 과 같은 형식으로 작성하는 방법 외에

 

.layer_test와 같이 별도로 부모 요소들을 타고 가지 않을 요소들을

한번에 처리할 수도 있다.

=> @at-root{} 사용

.wrap{
   .cont{
      text-align:center; font-size:12px;
      p{text-align:left;}
      .lst{
         overflow:hidden;
         li{float:left;}
         
         @at-root{
            .layer_test{border:1px solid #333; padding:10px;}
            .test_list{
               overflow:hidden;
               li{float:right;}
            }
         } 
      }
   }
}


/* CSS 출력 */
.wrap .cont {
  text-align: center;
  font-size: 12px;
}
.wrap .cont p {
  text-align: left;
}
.wrap .cont .lst {
  overflow: hidden;
}
.wrap .cont .lst li {
  float: left;
}
.layer_test {
  border: 1px solid #333;
  padding: 10px;
}
.test_list{
  overflow:hidden;
}
.test_list li{
  float:right;
}

 

3. @at-root의 응용2 (미디어 쿼리)

@at-root 속성은 미디어쿼리 문법에서도 유용하게 작성할 수 있다.

미디어 쿼리 문법안에서 내가 원하는 영역만 미디어쿼리 문법에 적용되지 않도록

처리할 수 있다.

(with:), (without:) 속성 사용

@media print {
  .page {
    text-align:center;
    
    // 1
    @at-root {
      .test1{font-size: 11px;}
    }
    
    // 2
    @at-root (with: all) {
      .test2{font-size: 20px;}
    }
    
    // 3
    @at-root (with: rule) {
      .test3{font-size: 15px;}
    }
    
    // 4
    @at-root (without: media) {
      .test4{color: #111;}
    }
  }
}

/* CSS 출력 */
@media print {
  .page {
    text-align: center;
  }
  
  // 1
  .test1 {
    font-size: 11px;
  }
  
  // 2
  .page .test2 {
    font-size: 20px;
  }
}

// 3
.page .test3 {
  font-size: 15px;
}

// 4
.page .test4 {
  color: #111;
}

위의 소스를 확인해보면

 

1번과 같이 단순히 미디어 쿼리 안에 @at-root 사용을

미디어 쿼리가 적용된 상태에서 부모 요소의 상속만 피해서 css가 컴파일이 되고

 

2번의 경우,

(with: all) 속성을 사용하여 문법을 작성하였는데

이 경우 1번과 마찬가지로 미디어 쿼리 문법 안에 일반 @at-root를 사용한 것과 같이

표현하게 된다.

 

3번과 4번의 경우

원하는 영역을 미디워 쿼리 문법 밖으로 css를 컴파일할 수 있도록 도와준다.

(with : rule)   //   (without : *print)

 

*print는 미디어 쿼리 문법이 screen일 경우엔 screen으로 변경될 수 있다.