CODEWITHSUNDEEP
stylus
Metalshark
Metalshark

Reputation: 8482

Inheriting a Stylus mixin's sub-rule

I would like to @extend a sub rule from a Stylus mixin that requires parameters, is this possible?

An example of this uses 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;
  }
}

Here I want to extend the sub rule .form-control in a manner like:

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

however this does not seem to work.

Upvotes: 1

Views: 237

Answers (1)

kizu
kizu

Reputation: 43244

No, there is no such native option and the chances are low there would be.

But if I understand you right: if you want to use only one specific rule from the mixin, using your selector for it, you could try to do something like this:

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

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

This would output only the following styles:

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

What happens there: you need to create a placeholder selector, then call a mixin with any arguments you need, then all the inserted rules would be prepended by the placeholder selector, so they too would become placeholders. Then you could just go and extend such complex placeholder selector.

Upvotes: 1

Related Questions