如何在 css 类中覆盖 @include？答案

【问题标题】：How can I overwrite @include in a css class?如何在 css 类中覆盖 @include？
【发布时间】：2018-12-14 05:07:10
【问题描述】：

我团队的应用正在使用 bootstrap sass 进行一些样式设置，但进行了某些自定义。引导文件是通过构建过程添加到我们的项目中的，因此我无法直接修改它们。

对于下拉切换元素，引导程序添加了一个小插入符号，我想将其删除。但它是通过@include 完成的（如下所示）。

.dropdown-toggle {
  // Generate the caret automatically
  @include caret;
}

如何在我们的本地 sass 文件中覆盖它以删除/从不显示插入符号？

编辑：这是我最终使用的修复程序。不完美，但它有效。

.dropdown-toggle::after {
    border: none !important;
}

这是插入符号混合：

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-right {
  border-top: $caret-width solid transparent;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-left {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: $caret-width * .85;
      vertical-align: $caret-width * .85;
      content: "";
      @if $direction == down {
        @include caret-down;
      } @else if $direction == up {
        @include caret-up;
      } @else if $direction == right {
        @include caret-right;
      }
    }

    @if $direction == left {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        width: 0;
        height: 0;
        margin-right: $caret-width * .85;
        vertical-align: $caret-width * .85;
        content: "";
        @include caret-left;
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

【问题讨论】：

sass 文件位于哪个 dropdown-toggle ？
它在 scss/_dropdown.scss 虽然我不确定它是在原始引导程序 4.0 包中还是在我们的 UX 组的引导程序的自定义实现中
我在引导程序中没有看到任何插入符号混合...请分享您的完整渲染 css，而不是 scss...
来源完全无关。我只是为了上下文而给出的。我有一个无法直接更改样式的文件，因为它是在构建过程中添加的。我需要在另一个样式文件中覆盖这个样式。如果它只是直接的 css，我知道我可以得到我需要的句柄，用 !important 添加我需要的新样式。对于@include（据我所知是scss语法）我不相信我可以那样覆盖它。
我需要 mixin caret 的 css...想象一下它在伪元素之前或之后，也许你可以不显示...

标签： css twitter-bootstrap sass

【解决方案1】：

好的，您可以在使用中覆盖并删除插入符号：

.dropdown-toggle {
  &:after, &:before {
     display: none;
  }
}

【讨论】：

这并没有完全解决问题，但我能够从中得出解决方案。 .dropdown-toggle::after { 边框：无！重要；感谢您的帮助:)