2

理想的には、これを実行したいと思います：

@w: 4px;

@media (max-width:900px) {
    @r: 3px; 
}
@media (min-width:900px) {
    @r: 5px; 
}

.myclass {
    border-radius: @w + @r;
}

@rが定義されているスコープで定義されていないため、これはコンパイルされません.myclass。明らかな解決策は.myclass、ブロック内で定義するか、の定義内でクエリ@mediaをコピーすることです。@media.myclass

しかし@r、多くのクラスで使用するとすぐに、両方のソリューションが乱雑になり、多くの重複が発生します。

きれいな乾燥した解決策はありますか？

4

2 に答える 2

6

メディアクエリに従ってプロパティ値を計算するミックスインを使用するだけです。インポートを介してこれを行う必要はありません。

以下：

@w: 4px;
.bordermixin(@w,@r) {
  .myclass{
    border-radius: @w + @r;
  }
}
@media (max-width:900px) {
    .bordermixin(@w,3px);
}
@media (min-width:900px) {
    .bordermixin(@w,5px);
}

CSS：

@media (max-width: 900px) {
  .myclass{
    border-radius: 7px;
  }
}
@media (min-width: 900px) {
  .myclass{
    border-radius: 9px;
  }
}
于 2013-03-18T11:04:35.127 に答える
3

私はに基づいて@import、私が乾いた状態を保つことができる解決策を見つけました。

私は2つのファイルを作成します：

classes.less

@w: 4px;

.myclass {
    border-radius: @w + @r;
}

mediawidth.less

@media (max-width:900px) {
    @r: 3px; 
    @import "classes.less";
}
@media (min-width:900px) {
    @r: 5px; 
    @import "classes.less";
}

生成されたCSS：

@media (max-width: 900px) {
  .myclass {
    border-radius: 7px;
  }
}
@media (min-width: 900px) {
  .myclass {
    border-radius: 9px;
  }
}

このようにして、多くのクラス定義を繰り返す必要はなく、インポートだけを繰り返す必要があります。

私はマーティンの答えを受け入れました。これは、渡す変数の数が少ない場合の最も一般的なケースでははるかにクリーンです。私の解決策は、変数が増えてクラスが多くのファイルで定義されるとすぐに、より乾燥してクリーンになる可能性があります。

于 2013-03-18T10:06:04.927 に答える