如何覆盖 Foundation 手风琴样式？

Question

我在 WordPress 主题中使用基础站点​​，我正在尝试覆盖手风琴组件的样式：

特别是我希望所有项目的边框半径为 10 像素。

似乎有几个mixin专门适用于列表中的第一个和最后一个元素，它们会改变边框半径：

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

我似乎无法覆盖第一个和最后一个项目的边框半径。

这是我第一次在项目中使用 sass，真的是第一次使用 sass。

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

Answer 1

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

有两种简单的方法：

通过“设置”

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

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

通过特异性

或者，如果您想保持全局半径为 0（或其他任何值）并且只希望手风琴具有 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 之后加载，这些文件也是来自 app.scss 文件的 @imported

编辑：.my-accordion 是您为该特定手风琴所拥有的类，但如果您只使用上述 scss 的 .accordion-item 部分，它也适用于所有手风琴。