第4章高度な機能を覚えてSassを使いこなそう

4-3 ネストしているセレクタをルートに戻せる @at-root

@at-root の基本的な使い方

.block {
    .element-A {
        width: 80%;
    }
    @at-root .element-B {
        width: 100%;
    }
}

.block .element-A {
  width: 80%;
}

.element-B {
  width: 100%;
}

複数のルールセットに@at-root を適用する

.block {
    .element-A {
        width: 80%;
    }
    @at-root {
        .element-B {
            width: 100%;
        }
        .element-C {
            width: 50%;
        }
    }
}

.block .element-A {
  width: 80%;
}
.element-B {
  width: 100%;
}

.element-C {
  width: 50%;
}

@at-root をメディアクエリ内で使った場合

.block {
    width: 50%;
    @media (max-width: 640px) {
       width: 100%;
        @at-root {
            .item {
                margin-bottom: 30px;
            }
        }
    }
}

.block {
  width: 50%;
}

@media (max-width: 640px) {
  .block {
    width: 100%;
  }
  .item {
    margin-bottom: 30px;
  }
}

@at-root のオプション @at-root(without:...)

.block {
    width: 50%;
    @media (max-width: 640px) {
        width: 100%;
        @at-root (without: media) {
            .item {
                margin-bottom: 30px;
            }
        }
    }
}

.block {
  width: 50%;
}
@media (max-width: 640px) {
  .block {
    width: 100%;
  }
}
.block .item {
  margin-bottom: 30px;
}

.block {
    width: 50%;
    @media (max-width: 640px) {
        width: 100%;
        @at-root (without: media rule) {
            .item {
                margin-bottom: 30px;
            }
        }
    }
}

.block {
  width: 50%;
}
@media (max-width: 640px) {
  .block {
    width: 100%;
  }
}
.item {
  margin-bottom: 30px;
}

@at-root のオプション @at-root (with:...)

.block {
    width: 50%;
    @media (max-width: 640px) {
        width: 100%;
        @at-root (with: media) {
            .item {
                margin-bottom: 30px;
            }
        }
    }
}

.block {
  width: 50%;
}
@media (max-width: 640px) {
  .block {
    width: 100%;
  }
  .item {
    margin-bottom: 30px;
  }
}