SASS的@at-root (with:...)介绍

发现网上大部分都是在介绍@at-root的without功能，对于with功能介绍较少，简单来说就是without的相反情况。

对于大佬们来说可能不值一提，对于初入sass的初学者可能会有一些困扰。

正如@at-root (without:...)一样，@at-root(with:...)同样含有rule, media, all, supports四种选择。

以midea为例：

@media print {
    .parent1{
        color: blue;
        @at-root (with: media) {
            .child1{
                width: 100px;
            }
        }
    }
}
@media print {
    .parent2{
        color: blue;
        @at-root (with: rule) {
            .child2{
                width: 100px;
            }
        }
    }
}

转化后的代码为：

//使用with: media后 .child1被包含在@media中。
@media print {
  .parent1 {
    color: blue;
  }
  .child1 {
      width: 100px;
  }
}
//使用with: rule后 .child2被移出@media
@media print {
  .parent2 {
    color: blue;
  }
}
.child2 {
  width: 100px;
}