Sass(SCSS)の&(アンパサンド)の使い方(自分用メモ)

Sass(SCSS)の&(アンパサンド)の使い方(自分用メモ)

ここしばらくデザイン系の仕事が多く、マークアップをメインに作業していませんでしたが、今回改めてSassを使用する機会がふえてきましたので、自分用のメモとしても&(アンパサンド)の使い方を中心にまとめておきたいと思います。

基本的な使い方

.hoge {

    clor: #fff
;
    &__foo {
    margin:0 auto;

    }

    &__hoo {
    padding:10px;

        &:hover {
        opacity: .8;

        }

    }

}

コンパイル後

.hoge {
    color: #fff;

}

.hoge__foo {
    margin:0 auto;

}

.hoge__hoo {
    padding: 10px;
}

.hoge__hoo:hover {
    opacity:  .8;

}

セレクタの後に&をつける

hoge__fooの要素を使用しながら親のクラス名を別で指定し、特定の要素を追加したい時に便利ですね!

.hoge {

    &__foo {
    margin:0 auto;

        .hoo & {
        padding :10px;

        }
    }
}

コンパイル後

.hoge__foo {
    margin: 0 auto;

}

.hoo hoge__foo {
    padding: 10px;

}

 

3階層目でセレクタ後に&をつける場合

3階層目でセレクタ後に&を指定すると、親の全てのクラスが指定されます。
順番に気をつけましょう。

.hoge {

    color: #fff;

    &__foo {
        margin:0 auto;

        .hoo & {

        padding: 10px;

        }

    }

}

コンパイル後

.hoge {
    color: #fff;

}

.hoge__foo {
    margin:0 auto;

}

.hoo .hoge .hoge__foo {
    padding: 10px;

}

extendをうまく使おう!

別のクラス名hoge__hoo–activeの場合にもhoge__fooの要素を使用したい場合は、ectendを使うと便利です。

.hoge {

    &__foo {
    margin:0 auto;

    }

    &__hoo--active {
    padding: 10px;

    @extend .hoge__foo
;
    }

}

コンパイル後

.hoge__foo,

.hoge__hoo--active {
    margin:0 auto;

}

.hoge__hoo--active {
    padding: 10px;

}

応用編

&やextendを上手く使えばソース量も減ってパフォーマンスも向上しますね!!

.hoge {

    &__foo {
    margin:0 auto;

    }

    &__hoo--active {
    padding: 10px;

    @extend .hoge__foo
;
        .doo & {

        color: #fff;

        }

    }

}

コンパイル後

.hoge__foo,

.hoge__hoo--active {
    margin:0 auto;

}

.hoge__hoo--active {
    padding: 10px;

}

.doo hoge__hoo--active {
    color: #fff;

}

サイト制作カテゴリの最新記事