1

我想@extend 来自需要参数的 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-control：

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

但这似乎不起作用。

4

1 回答 1

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，然后所有插入的规则都将由占位符选择器预先设置，因此它们也将成为占位符。然后你可以去扩展这样复杂的占位符选择器。

于 2014-01-17T22:14:45.820 回答