@at-root 의 사용법

중첩 속에 있는 css를 중첩 밖으로 적용 한다. 어떠한 경우에도 최상단으로 뺀다.

at-root 중첩속에서 또 다시 선언해주면 중첩 밖으로 빠진다.

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

          @at-root .parent{
            border:1px solid #333; padding:10px;
            .sideBar{
                color: red;
                @at-root body{
                    background: black;
                }
            }
        }
       }
    }
 }

CSS 빌드 후

.at_root_test .cont {text-align: center; font-size: 12px;}
.at_root_test .cont .lst { overflow: hidden;}
.at_root_test .cont .lst li {float: left;}
.parent { border: 1px solid #333; padding: 10px;}
.parent .sideBar { color: red;}
body { background: black;}

이렇게 적용되요