Question

我想@extend一个需要参数的Stylus mixin的子规则，这可能吗？

// 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-control：

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

然而这似乎不起作用。

Answer 1

不，没有这样的原生选项，可能性很低。

但是如果我理解你的话：如果你只想使用mixin中的一个特定规则，使用你的选择器，你可以尝试这样做：

$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;
}

那里发生了什么：你需要创建一个占位符选择器，然后使用你需要的任何参数调用mixin，然后所有插入的规则将由占位符选择器预先添加，因此它们也将成为占位符。然后你可以去扩展这样复杂的占位符选择器。

继承Stylus mixin的子规则

1 个答案: