LESSで3倍ラクするスマートフォンコーディング

第3回 LESS記法について(中級編:ネストの応用)

この記事を読むのに必要な時間:およそ 2 分

ネストの応用 ~&で複数の要素を並列に指定する

ネストは基本的にHTMLの階層構造にならってCSSを記述していく方法です。

しかし,以下のCSSのように,複数のclass指定や,:link・:hoverのように,階層構造ではなく並列に指定することもよくありますよね。

/*CSS*/
.foo {
     background: red;
}
.foo.var {
     background: blue;
}

a {
     color: red;
}
a:hover {
     color: blue;
}

LESSでは,⁠&(アンパサンド)⁠を利用することで,このような複数のclass指定や,擬似要素/擬似クラスも階層構造で記述できます。

//LESS
.foo {
     background: red;
     &.var {
          background: blue;
     }
}

a {
     color: red;
     &:hover {
          color: blue;
     }
}


/* Compiled CSS */
.foo {
     background: red;
}
.foo.var {
     background: blue;
}

a {
     color: red;
}
a:hover {
     color: blue;
}

「&」には「&を指定した親要素に,&以降のセレクタをつなげる」という意味があります。つまり「&」のあとにスペースを入れてしまうと,普通にネストした場合と同様になってしまうので気をつけてください。

"ios"というclassがbodyに付いているときのみ,背景を青にするには

この「&」は他にも非常に強力な利用法があります。

たとえば「"ios"というclassがbodyに付いているときのみ,背景を青にする」という指定をすることを考えてみましょう。

そのような指定は今までのネストの書き方では不可能なので,そのネストとは別に記述する必要が出てきます。

しかし「&」を利用すると,⁠親要素にbody.iosがあった場合」という記述がかんたんにできるのです。

//LESS
.foo {
     .var {
          background: red;
     }
     body.ios & .var {
          background: blue;
     }
}

/* Compiled CSS */
.foo .var {
     background: red;
}
body.ios .foo .var {
     background: blue;
}

ネストの階層構造にすると少し違和感を感じるかもしれませんが,⁠&」の前に記述したセレクタを一番前に持ってきて,それ以降のセレクタは普段のルールどおりに生成されます。

これにより,⁠"ios"というclassがbodyに付いているときのみ背景を青にする」といった記述も,その色指定の前後で行えるようになります。場合分けの指定を近くに書いておけるので,可読性が上がり,修正時のミスなども減らすことができます。

iOSとAndroidの両方に対応させる場合など,どうしても同一の記述ができない場合は多いですが,そういった際にとても強力な手助けとなるでしょう。

コラム 「&」で親要素を指定する方法は非公式?

じつは,この記述法はLESSの公式サイトでは説明されていません。LESSを紹介しているサイトでも,この記述法を扱っている例はほとんどないようです。

これはLESSのライバルであるSASSに影響を受けて作られたようです。便利なので,積極的に利用していきたい機能の1つです。

以上,前回ご紹介したネストをさらに魅力的なものにする活用法をご紹介しました。これらの記法は,一度慣れてしまうと手放せず,日常的に使えるものとなるしょう。

次回は変数で宣言された色や数値の計算方法などをご紹介します。ぜひお楽しみに!

著者プロフィール

宇野雄(うのゆう)

UI・UXデザイナー。

ヤフー株式会社にて,主にスマートフォンWebとアプリのUI・UX設計/デザイン/コーディングを担当。

全く新しいモノづくりよりも,既にあるモノを新しい視点でとらえるデザインが好き。犬派。

Twitter:@saladdays

コメント

コメントの記入