html - 从 Bootstrap 类创建自定义 CSS Helper

Question

我是 Bootstrap 和 CSS/SCSS 的新手。我有一个按钮组，我在 Rails 应用程序的许多不同位置使用它。

<div class="btn-group" role="group">
    <%= link_to lesson, class: 'btn btn-sm btn-outline-primary' do %>
        <i class="fa fa-eye" aria-hidden="true"></i>
    <% end %>

    <%= link_to edit_lesson_path(lesson), class: 'btn btn-sm btn-outline-primary' do %>
        <i class="fa fa-pencil" aria-hidden="true"></i>
    <% end %>

    <%= link_to lesson, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-sm btn-outline-primary' do %>
        <i class="fa fa-trash" aria-hidden="true"></i>
    <% end %>

    <%= link_to vocabs_by_lesson_path(lesson), class: 'btn btn-sm btn-outline-primary' do %>
        <i class="fa fa-arrow-down" aria-hidden="true"></i>
    <% end %>
</div>

如您所见，我经常使用“btn btn-small btn-outline-primary”。我想定义一个 css 助手(或类似的东西)，这样我就可以写:

class: 'action-button'

代替

class: 'btn btn-sm btn-outline-primary'

这样可以更轻松地仅在一个位置更改按钮的布局。

我已经读过一些关于 css 子类的内容，但不明白如何创建一个类(action_button)，它只是扩展了所有 Bootstrap 类/帮助程序“btn”、“btn-sm”和“btn-”大纲主要。'

提前致谢。

Answer 1

您可以使用 sass 的 extend 功能。然后写 scss 像这样:

.action-button {
    @extend .btn;
    @extend .btn-sm;
    @extend .btn-outline-primary;
}

请尽可能使用选择器类(以 % 开头的类)，而不是带有扩展的普通类。