SCSS without和with

without和with通常和@at-root配合使用。

關於@at-root的用法可以參閱scss @at-root一章節。

預設@at-root只會跳出選擇器巢狀，而不能跳出@media或@support指令。

如果要跳出這兩種指令，則需使用@at-root (without: media)，@at-root (without: support)。

這個語法的關鍵詞有四個：

（1）.all：表示所有。

（2）.rule：表示常規css。

（3）.media：表示media。

（4）.support：表示support。

預設的@at-root就是@at-root (without:rule)。

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

上面的程式碼只能夠跳出.parent，但是不能夠跳出@media。

編譯成css程式碼如下:

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

再看一段程式碼例項:

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

上面的程式碼指定只跳出media，並不會跳出.parent。

編譯成css程式碼如下:

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

再來看一段程式碼例項:

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

上面的標識要跳出所有，所以編譯以後css程式碼如下:

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

如果要跳出所有指定，程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
@media print { 
  @supports ( transform-origin: 5% 5% ) { 
    @at-root (without: all){
      .foo { 
        color: green; 
        color: gray; 
      }
    }
  } 
}

編譯後的CSS程式碼如下:

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

下面介紹with:

它的作用恰好和without相反，如果說without作用是指定跳出哪些指令的話，那麼with就是指定不跳出哪些指令，其他的指令都跳出，程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
@media print { 
  @supports ( transform-origin: 5% 5% ) { 
    @at-root (with: supports){
      .foo { 
        color: green; 
        color: gray; 
      }
    }
  } 
}

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

[CSS] 純文字檢視 複製程式碼
@supports (transform-origin: 5% 5%) {
  .foo {
    color: green;
    color: gray;
  }
}