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>

就像你可以看到我正在使用＆b; btn btn-small btn-outline-primary＆＃39;常常。我想定义一个css帮助器（或类似的东西），这样我就可以写：

class: 'action-button'

而不是

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

这样可以更容易地在一个地方更改按钮的布局。

我已经在css中读过关于子类的内容，但是我不知道如何创建一个类（action_button），它只扩展了所有引导类/帮助程序＆＃39; btn＆＃39;，＆＃39 ; btn-sm＆＃39;和＆＃39; btn-outline-primary。＆＃39;

提前致谢。

Answer 1

您可以使用sass的extend功能。写下scss这样的东西：

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

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

Answer 2

老实说个人意见这btn btn-large btn-success规则仍然是自定义css规则的最佳方式，因为每个规则组合都会产生另一种效果，但如果你想改变它的工作方式，你可以使用mixins，因为你使用了rails合并scss它可能在下面做的是你可以用来实现的mixins代码示例，如果你想合并bootstrap css那么你必须检查btn规则css设置并放入mixins

@mixin btn-rule($value) {
  -webkit-border-radius: $value;
  # insert same css rule of btn here
}

.box-2 { 
  @include btn-rule(10px);
  font-size: 12px;
}

.box-2 { 
  @include btn-rule(5px);
  font-size: 30px;
}

如果您想了解更多信息，那么sass guide就是一个很好的资源

从Bootstrap类创建自定义CSS帮助程序

2 个答案: