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

如何在模态补充中覆盖波旁风格？

1 个答案: