第4章 高度な機能を覚えてSassを使いこなそう4-3 ネストしているセレクタをルートに戻せる @at-rootSample Code

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

Sass
1
.block {
2
  .element-A {
3
    width: 80%;
4
  }
5
  @at-root .element-B {
6
    width: 100%;
7
  }
8
}
CSS
1
.block .element-A {
2
  width: 80%;
3
}
4
.element-B {
5
  width: 100%;
6
}

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

Sass
1
.block {
2
  .element-A {
3
    width: 80%;
4
  }
5
  @at-root {
6
    .element-B {
7
      width: 100%;
8
    }
9
    .element-C {
10
      width: 50%;
11
    }
12
  }
13
}
CSS
1
.block .element-A {
2
  width: 80%;
3
}
4
.element-B {
5
  width: 100%;
6
}
7


8
.element-C {
9
  width: 50%;
10
}

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

Sass
1
.block {
2
  width: 50%;
3
  @media (max-width: 640px) {
4
    width: 100%;
5
    @at-root {
6
      .item {
7
        margin-bottom: 30px;
8
      }
9
    }
10
  }
11
}
CSS
1
.block {
2
  width: 50%;
3
}
4
@media (max-width: 640px) {
5
  .block {
6
    width: 100%;
7
  }
8
  .item {
9
    margin-bottom: 30px;
10
  }
11
}

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

Sass
1
.block {
2
  width: 50%;
3
  @media (max-width: 640px) {
4
    width: 100%;
5
    @at-root (without: media) {
6
      .item {
7
        margin-bottom: 30px;
8
      }
9
    }
10
  }
11
}
CSS
1
.block {
2
  width: 50%;
3
}
4
@media (max-width: 640px) {
5
  .block {
6
    width: 100%;
7
  }
8
}
9
.block .item {
10
  margin-bottom: 30px;
11
}
Sass
1
.block {
2
  width: 50%;
3
  @media (max-width: 640px) {
4
    width: 100%;
5
    @at-root (without: media rule) {
6
      .item {
7
        margin-bottom: 30px;
8
      }
9
    }
10
  }
11
}
CSS
1
.block {
2
  width: 50%;
3
}
4
@media (max-width: 640px) {
5
  .block {
6
    width: 100%;
7
  }
8
}
9
.item {
10
  margin-bottom: 30px;
11
}

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

Sass
1
.block {
2
  width: 50%;
3
  @media (max-width: 640px) {
4
    width: 100%;
5
    @at-root (with: media) {
6
      .item {
7
        margin-bottom: 30px;
8
      }
9
    }
10
  }
11
}
CSS
1
.block {
2
  width: 50%;
3
}
4
@media (max-width: 640px) {
5
  .block {
6
    width: 100%;
7
  }
8
  .item {
9
    margin-bottom: 30px;
10
  }
11
}

サンプルコード一覧へ

Amazonで購入する