Question

看起来你可以写一些像

这样的东西

.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;        // Make inputs at least the height of their button counterpart
  .box-sizing(border-box); // Makes inputs behave like true block-level elements
}

和input-block-level可以用作mixin（带括号），也可以用作类，如果应用于元素。 scss中有类似的功能吗？

（取自https://github.com/twitter/bootstrap/blob/master/less/mixins.less#L154）

的例子

Answer 1

您所描述的功能将通过@extend实现。

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend

以下是Sass文档中的一个示例：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

话虽如此，您是否要使用extend或mixin取决于您的情况。

Answer 2

我无法回答确切的功能，而是回答“类似功能”......

@mixin input-block-level {
    /* css */
}
.input-block-level {
    @include input-block-level;
}

作为猜测，由于定义mixin所需的@mixin指令，我希望无法使用确切的功能。

mixin可以成为SCSS中的一个类吗？

2 个答案: