条件が下限で動作していない

Question

lessを使用して既存のパディング値を変更しようとしましたが、機能しません。私の道は正しいのですか？ plsが提案する。

トグル機能に似ています。パディング値が20pxの場合、0pxを変更して0pxを20pxに変更する必要があります。

LESS：条件付き

.add, .toggle { 
    padding: 8px 20px 8px 20px; 
    .theme("20px"); 
    &:hover { 
     padding: 8px 18px 8px 18px; 
     .themed("18px"); 
    } 
    &:active { 
     padding: 8px 18px 8px 18px; 
     .themed("18px"); 
    } 
    &:focus { 
     padding: 8px 18px 8px 18px; 
     .themed("18px"); 
    } 
} 
.theme (@mode) when (@mode = "20px") { 
    padding: 8px 0px 8px 20px; 
} 
.themed (@mode) when (@mode = "18px") { 
    padding: 8px 0px 8px 18px; 
} 

Answer 1

Your mixins別のパディングの定義を追加することによって、彼らはパディングをオーバーライドしている、私のために正常に動作。サンプル（完了していない）CSS出力：

.add, 
.toggle { 
    padding: 8px 20px 8px 20px; 
    padding: 8px 0px 8px 20px; /* this takes effect */ 
} 
/* ... */ 

それが動作していないようならば、あなたはミックスインの内側に;前!importantを追加しようとすることができます。

---

しかし、あなたは1つのミックスインで、および@modeparameter inside the ruleを使用することにより、少ないコードシンプルな操作を行うことができます。私はミックスインの呼び出しからあまりにも重引用符を削除

.add, .toggle { 
    .theme(20px); // <-- no quotes 

    &:hover, &:active, &:focus { // <-- merged them as they're the same 
    .theme(18px); // <-- no quotes 
    } 
} 

.theme (@mode) { 
    padding: 8px 0px 8px @mode; // <-- use parameter 
} 

注意してください。 see it working hereを使うと、コードと同じCSS出力を（効果的に）生成します。

希望すると助かります。