Creating Custom CSS Helper From Bootstrap Classes

Question

I am new to Bootstrap and CSS/SCSS. I have a button group which I am using at many different locations in my rails application.

<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>

Like you can see I am using 'btn btn-small btn-outline-primary' very often. I want to define a css helper (or something like this), so that I can just write:

class: 'action-button'

instead of

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

This would make it easier to change the layout of the buttons just at one place.

I have already read something about subclasses in css, but don't understand how I can create one class (action_button) which just extends all the bootstrap classes/helpers 'btn', 'btn-sm', and 'btn-outline-primary.'

Thanks in advance.

Possible duplicate of How to compose multiple classes into a single semantically-named class? — fen1x
– fen1x, Commented Jul 19, 2017 at 7:59

Master.Deep · Accepted Answer · 2017-07-19 08:00:07Z

1

You can use extend functionality of sass. and write scss something like this:

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

Kindly if possible use selector classes (classes which start with %) instead of normal classes with extend.

answered Jul 19, 2017 at 8:00

Master.Deep

8129 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

widjajayd · Accepted Answer · 2017-07-19 08:06:50Z

Honestly personal opinion this btn btn-large btn-success rule still the best way to customize the css rule since each rule combination create another effect but if you want to change the way it work you can use mixins since you use rails that merged with scss it's possibly to do it below is sample of mixins code that you can use to achieve, if you want to merge bootstrap css then you have to check the btn rule css setting and put inside 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;
}

if you want to learn more then sass guide is good resource

Collectives™ on Stack Overflow

Creating Custom CSS Helper From Bootstrap Classes

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related