Border Sandwich Mixin

readme.md

Border Sandwich Mixin

A simple mixin to create top and bottom borders on elements

Default Usage

You can define the sandwich with a regular border definition

@include border-sandwich(1px solid black)

Which give the following result
----------------------------
First Item
----------------------------
Second Item
----------------------------
Third Item
----------------------------

Just Filling Usage

To make this border sandwich just have filling, simply add a true argument to the end of your @include

@include border-sandwich(1px solid black, true)

First Item
----------------------------
Second Item
----------------------------
Third Item

Thanks

Thanks to @paulzoom for his help on this, especially with getting it IE9+ compatiable

border-sandwich-mixin.scss

@mixin border-sandwich($border, $just-filling: false) {
  
  @if ($just-filling) {
    
    &:not(:first-of-type) { 
      border-top: $border;
    }
 
  } @else {
 
    border-bottom: $border;
    &:first-of-type {
      border-top: $border;
    }
    
  }
}