The shorthand property for border is neat and tidy, however with this Border SCSS Mixin, you can just as easily add a border to one side or three sides.
<div class="card border-all">
<p>border <strong>all</strong></p>
</div>
<p>@include border(5px,solid,#0080FF,<strong>all</strong>);</p>
<div class="card border-less-bottom">
<p>border <strong>all</strong> less <strong>bottom</strong></p>
</div>
<p>@include border(5px,solid,#0080FF,<strong>all</strong>,<strong>bottom</strong>);</p>
<div class="card border-top">
<p>border <strong>top</strong></p>
</div>
<p>@include border(5px,dashed,#0080FF,<strong>top</strong>);</p>
@mixin border(
$border-size: 1px,
$border-pattern: solid,
$border-color: black,
$border-position: all,
$border-clear: none ) {
@if $border-position == all {
border: $border-size $border-pattern $border-color;
}
@else {
border-#{$border-position}: $border-size
$border-pattern $border-color;
}
@if $border-clear == none {
$border-position: all;
}
@else {
border-#{$border-clear}: none;
}
}
/* mixin usage */
.border-all {
@include border(5px,solid,#0080FF,all);
}
.border-less-bottom {
@include border(5px,solid,#0080FF,all,bottom);
}
.border-top {
@include border(5px,dashed,#0080FF,top);
}
/* demo styles */
.card {
width: 12em;
margin: 2em auto .5em;
padding: 1em;
font-size: 1.5rem;
line-height: 1;
background: #ccffff;
}
p {
margin: 0;
strong { color: #0080FF; }
}
body {
text-align: center;
}