问继承Stylus mixin的子规则
EN

Stack Overflow用户

提问于 2013-11-04 04:29:28

回答 1查看 229关注 0票数 1

我想@从需要参数的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

然而，这似乎不起作用。

stylus

回答 1

Stack Overflow用户

发布于 2014-01-18 06:14:46

不，没有这样的本地选项，出现的机会也很低。

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

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

发生了什么:你需要创建一个占位符选择器，然后调用一个带有任何你需要的参数的混合，然后所有插入的规则都会被占位符选择器放在前面，所以它们也会成为占位符。然后你就可以去扩展这种复杂的占位符选择器了。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19757726

复制

相似问题

问继承Stylus mixin的子规则
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问继承Stylus mixin的子规则EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问继承Stylus mixin的子规则
EN