Question

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

特别是我希望所有项目的边界半径为10px。

似乎有一些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。我已将全局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。

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

Answer 1

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

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

通过“设置”

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

N.B。这是所有基础元素的半径，而不仅仅是手风琴。

通过特异性

或者，如果你想保持全局半径为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之后加载，这些文件也是@import文件中的app.scss

编辑：.my-accordion是哪种类型的特定手风琴，但如果您只使用上面的.accordion-item部分，它也适用于所有手风琴。

如何覆盖基础手风琴风格？

1 个答案: