2

高度にカスタマイズ可能なボタン mixin を作成しようとしています。たとえば、クライアントが .less ファイルにアクセスして次のように記述できるようにしたいと考えています。

.my-button {
    .btn(@bg: #FFF, @font: "", @color: #000, @size: 'large'...);
    ...
}

現在、私の.btn(...)mixin では、Less mixin ガードを正しく組み込んで、自分のやりたいことを実行する方法を見つけようとしています。

以下のように書けると思います。

.btn(@bg: #FFF, @font: "", @color: #000, @size: 'large'...) {
    // All of my styling here
}

.btn(@bg: #FFF, @font: "", @color: #000, @size: 'large'...) when (@size = 'medium') {
    // All of my styling here BUT with new edits for 'medium' sizing
}

しかし、これは非常に非効率的で冗長に思えます。クライアントに複数の mixin 呼び出しを行わせることなく、本当にカスタマイズ可能な mixin を許可するより良い方法はありますか? 電話するだけでこれができるようになりたい.btn(...)

4

1 に答える 1

4

はい、問題で提供されているようなミックスインの構造化は、複数のミックスインで共通のスタイルを繰り返さなければならないため、少し非効率的です。

繰り返しを避ける方法はいくつかあります。以下にそれらを示します。

方法 1 (ガードを使用):

ここでわかるように、共通のプロパティは親 mixin 内で 1 回だけ指定され、サイズのみに依存するプロパティはガード内で提供されます。このメソッドの短所は、サイズがサポートされている値のリストの外にある場合、ミックスインは保護された領域から何も出力せず、警告もスローしないことです。これは、一致するものが見つからない場合、Less コンパイラが警告なしに保護された領域をスキップし、エンド ユーザーが Less コードについて何も知らない場合に問題になる可能性があるためです。

.my-button-large {
    .btn(@font: "Arial");
}
.my-button-medium {
    .btn(@bg: #000, @font: "Calibri", @size: "medium");
}
.my-button-small {
    .btn(@bg: #777, @font: "Verdana", @size: "small");
}

.btn(@bg: #FFF, @font: "", @color: #000, @size: "large"){
  background-color: @bg;
  font-family: @font;
  color: @color;
  & when (@size = "large"){
    font-size: 24px;
    padding: 12px;
    line-height: 24px;
  }
  & when (@size = "medium"){
    font-size: 18px;
    padding: 8px;
    line-height: 18px;    
  }
  & when (@size = "small"){
    font-size: 12px;
    padding: 4px;
    line-height: 12px;    
  }  
}

方法 2 (パターン マッチングを使用):

これは、ユーザーが指定した値が許可された値のリストの外にある場合に、コンパイル中にエラーがスローされる代替方法です。これは、スイッチとして機能するパターン マッチングを利用しているためです。

.my-button-large {
    .btn(@font: "Arial");
}
.my-button-medium {
    .btn(@bg: #000, @font: "Calibri", @size: "medium");
}
.my-button-small {
    .btn(@bg: #777, @font: "Verdana", @size: "small");
}

.btn(@bg: #FFF, @font: "", @color: #000, @size: "large"){
  background-color: @bg;
  font-family: @font;
  color: @color; 
  .bg-size(@size);
}
.bg-size("large"){
  font-size: 24px;
  padding: 12px;
  line-height: 24px;
}
.bg-size("medium"){
  font-size: 18px;
  padding: 8px;
  line-height: 18px;    
}
.bg-size("small"){
  font-size: 12px;
  padding: 4px;
  line-height: 12px;    
}
于 2015-09-19T05:21:46.877 に答える