SCSS @at-root

@at-root指令可以使一個或多個規則被限定輸出在文件的根層級上，而不是被巢狀在其父選擇器下。 

下面就通過程式碼例項介紹一下它的作用:

[Scss] 純文字檢視 複製程式碼
.parent{
  color:red;
  .child {
    width:200px;
    height:50px;
  }
}

編譯成css程式碼如下:

[CSS] 純文字檢視 複製程式碼
.parent {
  color: red; 
}
.parent .child {
  width: 200px;
  height: 50px; 
}

上面是沒有使用@at-root命令的預設情況。

[Scss] 純文字檢視 複製程式碼
.parent{
  color:red;
  @at-root .child {
    width:200px;
    height:50px;
  }
}

上面的程式碼編譯成css程式碼如下:

[CSS] 純文字檢視 複製程式碼
.parent {
  color: red;
}
.child {
  width: 200px;
  height: 50px; 
}

由於使用@at-root命令，那麼.child就不參與巢狀，直接跳出巢狀。

[Scss] 純文字檢視 複製程式碼
.parent {
  background:red;
  @at-root {
    .child-1 {
      width:200px;
      height:100px;
    }
    .child-2 {
      width:150px;
      height:50px;
    }
  }
}

編譯成css程式碼例項如下:

[CSS] 純文字檢視 複製程式碼
.parent {
  background: red; 
}
.child-1 {
  width: 200px;
  height: 100px; 
}
.child-2 {
  width: 150px;
  height: 50px; 
}

程式碼在預設情況下@at-root並不會使指定的規則或則選擇器跳出指令，比如@media或者@supports。

[Scss] 純文字檢視 複製程式碼
@media print { 
  @at-root{
    .foo { 
      color: green; 
      color: gray; 
    } 
  }
}

上面的程式碼編譯成CSS程式碼如下:

[CSS] 純文字檢視 複製程式碼
@media print {
  .foo {
    color: green;
    color: gray;
  }
}

可以看出@at-root預設情況下並不能使規則或者選擇器跳出指令。

和without和with配合使用解決上述問題，具體可以參閱SCSS without和with一章節。