1

パラメータを必要とする Stylus mixin のサブルールを @extend したいのですが、可能ですか?

この例では、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

いいえ、そのようなネイティブ オプションはなく、その可能性は低いです。

しかし、私があなたを正しく理解していれば、ミックスインから特定のルールを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;
}

そこで何が起こるか: プレースホルダー セレクターを作成し、必要な引数を指定して mixin を呼び出す必要があります。挿入されたすべてのルールはプレースホルダー セレクターによって先頭に追加されるため、それらもプレースホルダーになります。次に、そのような複雑なプレースホルダー セレクターを拡張することができます。

于 2014-01-17T22:14:45.820 に答える