CSSの拡張メタ言語Lessの&（アンド、アンパサンド）の使い方

ソースコードを読んでいて「& when () {...}」という構文が理解できず「Less アンド」などで検索しましたが、基本的な擬似セレクタの使い方ばかりで「&」の使い方をまとめた記事が無かったので調べました。
CSSに関して初心者のため、内容や用語の間違いなどがありましたらご指摘くださるとありがたいです。

使い方

セレクタで使用でき、以下の例のように親セレクタが代入されます。通常のネストはこの例の使い方を短縮した書き方といえます。

1.less

/* &に親セレクタが代入される */
div {
    color: black;
    & p {
        font-size: 18px;
    }
}
/* この場合は以下のように普通のネストと同じ挙動になる */
div {
    color: black;
    p {
        font-size: 18px;
    }
}

1.css

/* &に親セレクタが代入される */
div {
  color: black;
}
div p {
  font-size: 18px;
}
/* この場合は以下のように普通のネストと同じ挙動になる */
div {
  color: black;
}
div p {
  font-size: 18px;
}

擬似セレクタをネストで表現しようとすると間に空白が入ってしまうため、&を使わないと表現できません。classにも使えます。

2.less

/* 擬似セレクタのネスト*/
a {
    &:link{
        color: black;
    }
}
/* &を使わないと間に空白が入ってしまう */
a {
    :link{
        color: black;
    }
}
/* 単純に代入、展開されるだけなのでclassにも使える */
.search {
    &__input {
        color: black;
    }
    &__button {
        color: red;
    }
}

2.css

/* 擬似セレクタのネスト*/
a:link {
  color: black;
}
/* &を使わないと間に空白が入ってしまう */
a :link {
  color: black;
}
/* 単純に代入、展開されるだけなのでclassにも使える */
.search__input {
  color: black;
}
.search__button {
  color: red;
}

僕が困った親セレクタが無い時の挙動ですが、単純にセレクタとしては無視されます。以下のような利用方法があります。

3.less

/* 親セレクタが無いと無視される */
& {
    p {
        color: black;
    }
}
/* 以下のように複数のスタイルに同条件のGuardを用いるのに使える */
@var: true;
& when (@var = true) {
    button {
        color: black;
    }
    a {
        color: red;
    }
}
/* 上記は以下のようにも書けるが、条件の記述が2個所になってしまう */
button when (@var = true) {
    color: black;
}
a when (@var = true) {
    color: red;
}

3.css

/* 親セレクタが無いと無視される */
p {
  color: black;
}
/* 以下のように複数のスタイルに同条件のGuardを用いるのに使える */
button {
  color: black;
}
a {
  color: red;
}
/* 上記は以下のようにも書けるが、条件の記述が2個所になってしまう */
button {
  color: black;
}
a {
  color: red;
}

親セレクタが複数の場合、&が複数の場合

色々な使いみちがありそうですが、無理に使うとやけどしそうです。

4.less

/* 親クラスが複数の場合、それぞれ代入される。 */
h1, p {
    div & {
        color: black;
    }
}

/* &は複数利用できる */
a {
    .t&n&k& {
        color: black;
    }
}

/* さらに親セレクタが複数の場合、全組み合わせが作られる */
a, b, c {
    && {
        color: black;
    }
}

4.css

/* 親クラスが複数の場合、それぞれ代入される。 */
div h1,
div p {
  color: black;
}
/* &は複数利用できる */
.tanaka {
  color: black;
}
/* さらに親セレクタが複数の場合、全組み合わせが作られる */
aa,
ab,
ac,
ba,
bb,
bc,
ca,
cb,
cc {
  color: black;
}

参考

• http://less-ja.studiomohawk.com/ - 日本語公式
• http://lesscss.org/ - 英語公式