Help us understand the problem. What is going on with this article?

[SCSS]便利な&(アンパサンド)の使い方メモ

More than 1 year has passed since last update.

SCSSにおいての&(アンパサンド)の使い方備忘録です。

基本の使い方

.class {
    &.hoge {
        background-color : #31A0FF;
    }

    &__foo {
        background-color: #FD997C;
    }

    &:hover {
        text-decoration: underline;
    }
}

コンパイル後のCSS

.class.hoge {
  background-color: #31A0FF;
}

.class__foo {
  background-color: #FD997C;
}

.class:hover {
  text-decoration: underline;
}

シンプルに.classの直後に&後の文字列がくっつきます。

&を組み合わせる

.class {
    & + & {
        margin-top: 1em;
    }

    &,
    &--hoge {
        margin-top: 1em;
    }
}

コンパイル後のCSS

.class + .class {
  margin-top: 1em;
}

.class, .class--hoge {
  margin-left: 1em;
}

特定の親要素の場合に適用

.class {
    color: #333;

    .parent & { // 親要素指定
        color: #8B5BB5;
    }

    .parent &__foo { // 親要素+class名変化
        color: #3B8C10;
    }
}

コンパイル後のCSS

.class {
  color: #333;
}

.parent .class {
  color: #8B5BB5;
}

.parent .class__foo {
  color: #3B8C10;
}

.class の中でも.parent内の.classにだけ適用したい時に便利です。

特定の親要素の応用

.class {
    $parent: &; // 親要素を変数に定義

    &__child {
        color: #333;

        #{$parent} & { // 親要素を変数で呼び出し
            color: #8B5BB5;
        }

        #{$parent}-hoge & { // 親要素を変数+class名変化で呼び出し
            color: #3B8C10;
        }
    }
}

コンパイル後のCSS

.class__child {
  color: #333;
}

.class .class__child {
  color: #8B5BB5;
}

.class-hoge .class__child {
  color: #3B8C10;
}

親要素のclass名を変化させられるのは便利ですね!
$hoge : &;これで変数に定義できるというのも驚きです。

@at-rootと組み合わせてルートから指定

@at-root 基本

@at-root を先頭につけると、階層を無視してコンパイルされます。

.parent {
    @at-root .class {
        display: flex;
    }
}

コンパイル後のCSS

.class {
  display: flex;
}

親要素の.parentを無視して.classが独立します。

@at-root と & の組み合わせ

@at-root はあまり使う機会はありませんが、&と組み合わせるとブラウザハックなどに便利です。

.class {
    display: flex;

    // IE10以降のハック
    @at-root _:-ms-input-placeholder, :root & {
        display: block;
    }
}

コンパイル後のCSS

.class {
  display: flex;
}

_:-ms-input-placeholder, :root .class {
  display: block;
}

以上になります。

プリプロセッサーで書く方法を覚えてしまうとCSS直書きには戻れませんね。

お役に立てたら幸いです。


下記のページを参考にさせていただきました。ありがとうございます。

▼Level up your Sass with the ampersand
https://codepen.io/hidanielle/post/level-up-your-sass-with-the-ampersand

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした