條件不工作在更少

Question

我試圖改變現有的填充值使用較少，但它不工作。是我的方式是正確的嗎？請提出建議。

這就像切換功能。如果填充值爲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。

---

但是你可以做的更少的代碼更簡單，一個混入，並通過使用@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輸出作爲您的代碼。

希望我能幫上忙。