<div class="size-example">
  <h4>Border</h4>
  <div class="size size--1 size--border"></div>
  <div class="size size--2 size--border"></div>
  <div class="size size--3 size--border"></div>
  <div class="size size--4 size--border"></div>
</div>
<div class="size-example">
  <h4>Outline</h4>
  <div class="size size--1 size--outline"></div>
  <div class="size size--2 size--outline"></div>
  <div class="size size--3 size--outline"></div>
  <div class="size size--4 size--outline"></div>
</div>

.size-example {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.size-example h4 { 
  display: inline-block;
  font-size: 18px; 
  align-self: center;
  line-height: 0.6;
  color: #FFF; 
  margin-right: 0.5em;
}

.size {
  display: inline-block;
  margin: 0.25em 3px;
  font-size: 21px;
  line-height: 1;
  padding: 0.3em 1em 0.6em;
  box-sizing: border-box;

  &:after { 
    display: inline-block; 
    content: 'px'; 
    font-size: 0.6em; 
    margin-left: 0.1em;
  }
}

.size--1:before { content: '5'; }
.size--2:before { content: '5.4'; }
.size--3:before { content: '5.5'; }
.size--4:before { content: '6'; }


.size--border {
  border: solid 1px @border;
}

.size--border.size--1 { border-width: 5px; }
.size--border.size--2 { border-width: 5.4px; }
.size--border.size--3 { border-width: 5.5px; }
.size--border.size--4 { border-width: 6px; }

.size--outline {
  outline: solid 1px @border; 
  margin-left: 8px;
  margin-right: 8px;
}

.size--outline.size--1 { outline-width: 5px; }
.size--outline.size--2 { outline-width: 5.4px; }
.size--outline.size--3 { outline-width: 5.5px; }
.size--outline.size--4 { outline-width: 6px; }