从引导类创建自定义 CSS 助手答案

【问题标题】：Creating Custom CSS Helper From Bootstrap Classes从引导类创建自定义 CSS 助手
【发布时间】：2017-12-24 08:20:19
【问题描述】：

我是 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)，它只是扩展了所有引导类/帮助程序 'btn'、'btn-sm' 和 'btn-大纲-初级。'

提前致谢。

【问题讨论】：

How to compose multiple classes into a single semantically-named class?的可能重复

标签： html css ruby-on-rails twitter-bootstrap sass

【解决方案1】：

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

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

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

【讨论】：

【解决方案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 是很好的资源

【讨论】：