繼承手寫筆mixin的子規則

Question

我想從需要參數的Stylus mixin中擴展一個子規則，這可能嗎？

這方面的一個例子使用bootstrap-stylus：

// Form validation states 
// 
// Used in forms.less to generate the form validation CSS for warnings, errors, 
// and successes. 

form-control-validation(text-color = #555, border-color = #ccc, background-color = #f5f5f5) { 
    // Color the label and help text 
    .help-block, 
    .control-label { 
    color: text-color; 
    } 
    // Set the border and box shadow on specific inputs to match 
    .form-control { 
    border-color: border-color; 
    box-shadow inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work 
    &:focus { 
     border-color: darken(border-color, 10%); 
     box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(border-color, 20%); 
    } 
    } 
    // Set validation states also for addons 
    .input-group-addon { 
    color: text-color; 
    border-color: border-color; 
    background-color: background-color; 
    } 
} 

在這裏，我想以某種方式延長子規則.FORM控制，如：

.ui-state-valid 
    @extend form-control-validation($state-success-text, $state-success-text, $state-success-bg) .form-control 

然而，這似乎並沒有工作。

Answer 1

不，沒有這樣的本地選項，並且機會很低。

但是，如果我理解你正確的：如果你希望只使用一個特定的規則從混合料攪拌，用你選擇的話，你可以嘗試做這樣的事情：

$form-control-placeholder 
    form-control-validation() 

.ui-state-valid 
    @extend $form-control-placeholder .form-control 

這隻會輸出以下樣式：

.ui-state-valid { 
    border-color: #ccc; 
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
} 
.ui-state-valid:focus { 
    border-color: #b8b8b8; 
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 6px #d6d6d6; 
} 

什麼情況出現：你需要創建一個佔位符選擇，然後調用你需要，那麼所有插入的規則將被佔位選擇預先考慮任何參數的混入，所以他們也將成爲佔位符。然後你可以去擴展這樣複雜的佔位符選擇器。