css - 如何覆盖基础 Accordion 样式？

Question

我在 WordPress 主题中使用基础站点​​，我试图覆盖 Accordion 组件的样式:

特别是我希望所有元素的边框半径都为 10px。

似乎有几个 mixins 专门应用于列表中改变边界半径的第一个和最后一个元素:

/// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
@mixin accordion-item {
  &:first-child > :first-child {
    border-radius: $global-radius $global-radius 0 0;
  }

  &:last-child > :last-child {
    border-radius: 0 0 $global-radius $global-radius;
  }
}

我似乎遇到的问题是我无法覆盖此 mixin 中的边界，我已尝试重新声明 mixin 并将 0 更改为 $global-radius。我已将全局半径更改为 10px 定义的样式:

.di-accordian-title {
  background-color: $blue;
  color: $white !important;
  padding: 5px;
  border-radius: 10px;
  margin-top: 5px;
  width: 100%;
  clear: both;
  float: left;
  font-size: 14px;
}

.di-accordian-title:hover, .di-accordian-title:focus {
  background-color: $light-blue;
  color: $white !important;
  padding: 5px;
  border-radius: 10px;
  margin-top: 5px;
  width: 100%;
  clear: both;
  float: left;
  font-size: 14px;
}

我似乎无法覆盖第一个和最后一个元素 border-radius。

这是我第一次在元素中使用sass，第一次真正使用sass。

覆盖 accordion mixin 中设置的默认值的正确方法是什么？

Answer 1

您不需要覆盖混合，您自己的样式或设置的特殊性应该覆盖它。

有两种简单的方法可以做到这一点:

通过“设置”

在你的 _settings.scss 文件中(应该从 app.scss 引用)有一个 $global-radius 的设置默认设置为 0。只需将其设置为 10px 或 0.6rem 或您喜欢的任何值，全局半径就会更改为该值。

注意这是所有基础元素的半径，而不仅仅是 Accordion 。

通过特异性

或者，如果你想保持全局半径为 0(或其他)并且只希望 Accordion 的半径为 10px:

.my-accordion.accordion {
    .accordion-item {
        &:first-child > :first-child {
            border-radius: 10px 10px 0 0;
        }

        &:last-child > :last-child {
            border-radius: 0 0 10px 10px;
        }
    }
}

这将进入您的元素 scss 文件之一，在 Foundation SCSS 之后加载，它也是 @importapp.scss 文件

编辑:.my-accordion 是您为该特定 Accordion 设置的类，尽管如果您只使用 .accordion-item 它也适用于所有 Accordion 上面 scss 的一部分。