Bulma - 为自己的组件定制 SCSS

Question

在 BULMA 或 SCSS 中，也许更具体地说，我想使用一个组件，但有点复制它而不是覆盖它，这是通过扩展实现此目的的唯一方法，或者是否还有其他机制。 具体来说，我想使用 BULMA 下拉菜单来实现下拉选择器来替换 。但我不想更改 BULMA 类本身（下拉菜单、下拉项目...>，因为我可能想将它们用于其他场景中的典型用例。 那么在 SCSS 中执行此操作的最佳方法是什么（扩展是唯一的选择）？

另外，如果我这样做，我希望能够覆盖一些 bulma 下拉变量（例如 $dropdown-content-radius），但仅在我重新定义的组件的上下文中，而不是整个下拉类。有办法做到这一切吗？

希望有良好 SCSS 或 BULMA 经验的人可以帮助我解决这个问题。

到目前为止，我已经覆盖了变量并覆盖了一些组件项，例如 .dropdown-content ，它确实给了我我想要的东西，但基本上改变了整个类的行为，所以我不能按原样使用该类原来已经定义了。 我需要能够使用原始类以及稍微重新定义的类。

Answer 1

您可以向特定（下拉）元素添加一些修饰符，然后为其编写附加样式。

这是 bulma 下拉菜单的示例，其中包含一个更窄宽度的类（使用自定义

is-slim

类）：

<div class="dropdown is-active is-slim">    

在 SCSS 中，我定义了“is-slim”类：

/* A slim variant for a dropdown menu */
.dropdown.is-slim .dropdown-menu {
    width: auto;
    min-width: auto;
}

/* A slim variant for dropdown items */
.dropdown.is-slim .dropdown-menu button.dropdown-item {
    padding-left: 8px;
    padding-right: 8px;
}

您可以在此处查看 SCSS 定义。

添加此类仅更改具有此修饰符的菜单的样式，并保持其他下拉菜单不变。