title: Creating Custom CSS Helper From Bootstrap Classes
body: <p>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. </p>
  
  <pre><code>&lt;div class="btn-group" role="group"&gt;
      &lt;%= link_to lesson, class: 'btn btn-sm btn-outline-primary' do %&gt;
          &lt;i class="fa fa-eye" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;% end %&gt;
  
      &lt;%= link_to edit_lesson_path(lesson), class: 'btn btn-sm btn-outline-primary' do %&gt;
          &lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;% end %&gt;
  
      &lt;%= link_to lesson, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-sm btn-outline-primary' do %&gt;
          &lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;% end %&gt;
  
      &lt;%= link_to vocabs_by_lesson_path(lesson), class: 'btn btn-sm btn-outline-primary' do %&gt;
          &lt;i class="fa fa-arrow-down" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>class: 'action-button'
  </code></pre>
  
  <p>instead of</p>
  
  <pre><code>class: 'btn btn-sm btn-outline-primary'
  </code></pre>
  
  <p>This would make it easier to change the layout of the buttons just at one place. </p>
  
  <p>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.'</p>
  
  <p>Thanks in advance. </p>