Skip to content

Instantly share code, notes, and snippets.

@una una/sassy-shapes
Last active Apr 18, 2019

Embed
What would you like to do?
Sassy Shape Machine Mixin :) Make Sassy shapes in seconds!
// Some cute colors:
$color1: #967bd3;
$color2: #c8815b;
$color3: #8cd6d8;
$color4: #bee6b6;
$color5: #dd9bb9;
$color6: #c4b5e6;
$color7: #cb6363;
//Here's where you make the shapes!
.square{
@include shape(square, 50px, $color1);
}
.circle{
@include shape(circle, 50px, $color2);
}
.triangle{
@include shape(triangle, 50px, $color3);
}
.right-triangle {
@include shape(right-triangle, 50px, $color4)
}
.diamond{
@include shape(diamond, 50px, $color5);
}
.pentagon {
@include shape(pentagon, 50px, $color6);
}
.hexagon {
@include shape(hexagon, 50px, $color7)
}
// Sassy Shape Machine Mixin!
@mixin shape($shape, $size, $color){
@if $shape == square {
width: $size;
height: $size;
background-color: $color;
}
@if $shape == circle {
width: $size;
height: $size;
background-color: $color;
border-radius: 50%;
}
@if $shape == triangle {
width: 0;
height: 0;
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size*1.5 solid $color;
}
@if $shape == right-triangle {
width: 0;
height: 0;
border-bottom: $size solid $color;
border-right: $size solid transparent;
}
@if $shape == diamond {
width: 0;
height: 0;
border: $size solid transparent;
border-bottom-color: $color;
position: relative;
top: -$size;
&:after {
content: '';
position: absolute;
left: -$size;
top: $size;
width: 0;
height: 0;
border: $size solid transparent;
border-top-color: $color;
}
}
@if $shape == pentagon {
position: relative;
width: $size;
border-width: (25/27)*$size (1/3)*$size 0;
border-style: solid;
border-color: $color transparent;
&:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: (-17/11)*$size;
left: (-1/3)*$size;
border-width: 0 (5/6)*$size (35/54)*$size;
border-style: solid;
border-color: transparent transparent $color;
}
}
@if $shape == hexagon {
width: $size*2;
height: $size*1.1;
background: $color;
position: relative;
&:before {
content: "";
position: absolute;
top: $size/-2;
left: 0;
width: 0;
height: 0;
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size/2 solid $color;
}
&:after {
content: "";
position: absolute;
bottom: $size/-2;
left: 0;
width: 0;
height: 0;
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size/2 solid $color;
}
}
@if shape == octagon {
width: $size;
height: $size;
background: transparent;
position: relative;
text-align: center;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29/$size solid $color;
border-left: 29/$size solid transparent;
border-right: 29/$size solid transparent;
width: 42/$size;
height: 0;
}
&:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29/$size solid $color;
border-left: 29/$size solid transparent;
border-right: 29/$size solid transparent;
width: 42/$size;
height: 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.