css - 如何在模态填充中覆盖波旁风格？

Question

我正在使用 Bourbon modal reset .它的关闭按钮带有以下样式:

  .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 或取消设置。做这样的事情最好的方法是什么？我不想简单地删除原始填充文件中的属性；我想保留一个单独的 _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; 
  }
}