Skip to content

Instantly share code, notes, and snippets.

@tbremer
Created May 6, 2014 15:13
Show Gist options
  • Save tbremer/95f5b69ca466b122ca3f to your computer and use it in GitHub Desktop.
Save tbremer/95f5b69ca466b122ca3f to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="tester"></div>
<div class="tester2"></div>
<div class="tester3"></div>
// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----
@mixin border($color: #000, $width: 1 1 1 1, $style: solid){
border-color: $color;
border-style: $style;
$total: 0;
@each $side in $width{
$total: $side+$total;
}
@if $total/4 != nth($width, 1) {
$trbl: top right bottom left;
@for $i from 1 through length($width){
border-#{nth($trbl, $i)}-width: #{nth($width, $i)}px;
}
} @else {
border-width: #{nth($width, 1)}px;
}
}
div{
width: 100px;
height: 100px;
margin: 0 auto;
background-color: #c2c2c2;
@include border();
& + div{ margin-top: 10px; }
}
.tester2{ @include border(#d00,1 2 3 4) }
.tester3{ @include border(#0d0, 5 6 1 2, inset) }
div {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: #c2c2c2;
border-color: black;
border-style: solid;
border-width: 1px;
}
div + div {
margin-top: 10px;
}
.tester2 {
border-color: #dd0000;
border-style: solid;
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
}
.tester3 {
border-color: #00dd00;
border-style: inset;
border-top-width: 5px;
border-right-width: 6px;
border-bottom-width: 1px;
border-left-width: 2px;
}
<div class="tester"></div>
<div class="tester2"></div>
<div class="tester3"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment