title: Use of margin and padding variables in Sass in custom class Bootstap 4
body: <p>I was wondering how to get the spacer variables generic with the use of Bootsrap in a custom class.</p>
  
  <p>I have a class .box and want to apply the class pl-3 of bootstrap 4. 
  I don't want to add the class inline in HTML but want to style it in sass.</p>
  
  <p>I want to use the spacer variables of Bootstap and not hardcoded in the class itself. So if i want to change the padding in the future i only have to change the padding in the sass.</p>
  
  <p>I have the following defined:</p>
  
  <pre><code>$spacer: 1rem !default;    
  $spacers: (
        0: 0,
        1: ($spacer * .125),      // 2px
        2: ($spacer * .25),       // 4px
        3: ($spacer * .375),      // 6px
        4: ($spacer * .5),        // 8px
        5: ($spacer * 0.75),      // 12px
        6: ($spacer * 1)          // 16px
      )
  </code></pre>
  
  <p>What is the best way to do this?
  What i have found out is this:</p>
  
  <pre><code>.box{
     @extend .pl-3;
  }
  </code></pre>
  
  <p>But i don't like it this way. It's not very self explaining
  Is there an other/ better way to do this? Like:</p>
  
  <pre><code>.box{
         padding-left: $spacer-3;
      }
  </code></pre>