4

簡単に再利用でき、コードをより読みやすくするメディア クエリ変数を作成できることを知って、本当に楽しかったです。

@tablet: ~"(min-width: 768px) and (max-width: 980px)";
@media @tablet { ... }

メディアクエリをセレクターでグループ化できるかどうか知りたいです。私が実装した方法では機能していないように見えますが、可能性があるかどうかを確認したいと思いました。

@tablet: ~"(min-width: 768px) and (max-width: 980px)";
body {
  aside { ... }

  &.homepage,
  @media @tablet {
    aside { ... }
  }
}

メディアクエリ内でセレクターを定義する必要があるため、メディアクエリはありふれたセレクターとは異なることを理解していますが、このようなグループ化を達成するためのブードゥーなLESSの方法はありますか?

4

1 に答える 1

4

私はあなたが目指している出力を100％確信しているわけではありませんが、このLESSは色redを一度だけ定義し、それを両方に適用します：

@tablet: ~"(min-width: 768px) and (max-width: 980px)";
body {
  aside { color: blue }

  &.homepage {
    aside { color: red }
  }

  @media @tablet {
    .homepage;
  }
}

次の CSS が生成されます。

body aside {
  color: #0000ff;
}
body.homepage aside {
  color: #ff0000;
}
@media (min-width: 768px) and (max-width: 980px) {
  body aside {
    color: #ff0000;
  }
}
于 2012-12-12T16:30:12.683 に答える