如何在模态笔芯中覆盖波旁风格

Question

我正在使用波旁模式重置。它的关闭按钮带有以下样式：

  .modal-close {
    @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
    @include size(1.5em);
    background: $modal-background;
    cursor: pointer;
    &:after,
    &:before {
      @include position(absolute, 3px 3px 0 50%);
      @include transform(rotate(45deg));
      @include size(0.15em 1.5em);
      background: $modal-close-color;
      content: '';
      display: block;
      margin: -3px 0 0 -1px;
    }
    &:hover:after,
    &:hover:before {
      background: darken($modal-close-color, 10%);
    }
    &:before {
      @include transform(rotate(-45deg));
    }
  }

这使得它看起来像模态右上角的灰色×。但是，我想将其更改为看起来像一个显示"保存并关闭"的按钮。我想知道覆盖这些样式的最佳方法是什么。在像 margin 这样的属性上，我可以简单地将其设置为我想要的任何内容。然而，在@include position(....);，我不太确定如何将其重置为none、initial或unset。做这样的事情的最佳方法是什么？我不想简单地删除原始重填文件中的属性;我想保留一个单独的_modalOverride.scss，所以我可以把它包含在我想要的地方，但保持原件的机智。如何覆盖这些"自定义"@include属性？

Answer 1

Refills 被设计为被覆盖，所以我只对 HTML 执行以下操作：

...
<div class="modal-close" for="modal-1">Close and Save</div>
...

对于 SCSS：

...
.modal-close {
  @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
  @include size(8em 1.5em);
  background: tomato;
  cursor: pointer;
}
...

但是如果你想做一个覆盖文件，它可能有点棘手。您可以在 modal.scss 之后的文件中执行以下操作：

.modal-close {
  position: inherit;
  &:after,
  &:before {
    background: transparent;
  }
  &:hover:after,
  &:hover:before {
    background: transparent; 
  }
}