LESSにおけるメディアクエリ

要素にメディアクエリを追加する関数を作ってみましょう。 例として、モバイルデバイス用のスタイルを調整するクエリにします。 関数名もそれに応じて付けましょう：

styles.less.mobile(@code) {

}

この関数はパラメータとしてコードブロックを受け取ります。 このブロックをメディアクエリ内で出力しましょう：

styles.less.mobile(@code) {
  @media (max-width: 600px) {
    @code();
  }
}

では、作成した関数を使ってみましょう：

styles.lessdiv {
  .mobile({
    width: 300px;
  });
}

結果、コンパイル後、divはメディアクエリ内に配置され、 対応するスタイルを取得します：

styles.less@media (max-width: 600px) {
  div {
    width: 300px;
  }
}