css - mixin の @media (lessphp)

Question

このようなメディアクエリを使用して独自の mixin を作成したいと思います。

@maxWidth: 1170px;

.breakpoint(@maxWidth) {
  @media screen and (max-width: @maxWidth) {
    @content;
   }
 }

しかし、mixin の @media は機能しません。lessphp をサポートしますか? そうでない場合、どうすれば修正できますか？

PS すべての .less ファイルで、このルール (@media screen および (max-width: @maxWidth)) のコピーをたくさん作成したくありません。

ありがとう！

score 0 · Accepted Answer

例として、必要なブレークポイントに変数を使用することを検討してください。

@maxWidth: ~"screen and (max-width: 1170px)";

@media @maxWidth {
   color: red;
 }

1 に答える 1