Sass: 外包样式到 mixin 中不起作用

Question

所以我是 Sass 的新手，有这种奇怪的行为。

我想创建一个在启用和禁用时具有不同边框颜色的复选框。

看起来像这样。

已启用：

已禁用：

到目前为止，还不错。

React 代码片段：

            <div className="item">
                <input type="checkbox" disabled={true} checked={true}/>
            </div>

和（工作）CSS：

input[type=checkbox] {
  position: relative;
  cursor: pointer;
}

// "before" works with mixin
input[type=checkbox]:before {
  @include checkbox_before;
  border: 2px solid black;
}

// "before" works with mixin
input[type=checkbox]:disabled:before  {
  @include checkbox_before;
  border: 2px solid red;
}

// ToDo: include mixin like for "before"
input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 6px;
}

// ToDo: include mixin like for "before"
input[type=checkbox]:disabled:checked:after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid red;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 6px;
}

请注意“待办事项：像“之前”一样包含 mixin”。对于“之后”，mixin (@include checkbox_before) 工作正常。

但是当我对“之前”尝试相同时，它看起来像这样：

这里是 CSS:

input[type=checkbox]:checked:after {
  @include checkbox_after;
  border: solid #666666;
}

input[type=checkbox]:disabled:checked:after {
  @include checkbox_after;
  border: solid red;
}

... 和混入：

// "before" section --> works
@mixin checkbox_before {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  border-radius: 3px;
  background-color: white;
}

// "after" section --> does not work
@mixin checkbox_after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 6px;
}

如您所见，我将所有样式都放在混合“checkbox_after”中，因为它们对于启用和禁用的变体都是相同的。唯一不同的是颜色。

那么为什么当我将所有样式都放在“大”CSS 中而不是当我将它们外包到 mixin 中时它会起作用？我找不到任何解释。

将不胜感激。

Answer 1

我自己找到了解决方案，以防其他人遇到问题：

为混入使用一个参数。因此，与其包含 mixin 并额外声明边框，不如将其作为参数传递给 mixin 函数，如下所示：

@include checkbox_after(solid red);

mixin 看起来像这样：

@mixin checkbox_after($border) {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: $border;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 6px;
}

干杯！

Sass: 外包样式到 mixin 中不起作用

Sass: Outsourcing style into mixin does not work

css

sass

scss-mixins