Skip to content

Instantly share code, notes, and snippets.

@lisacatalano
Created October 17, 2015 18:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lisacatalano/7154842043572042220b to your computer and use it in GitHub Desktop.
Save lisacatalano/7154842043572042220b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="box"></div>
<div class="rounded-box"></div>
<div class="circle"></div>
// ----
// libsass (v3.2.5)
// ----
@mixin shape($radius, $color, $size) {
background-color: $color;
border-radius: $radius;
width: $size;
height: $size;
}
@mixin spacing($margin: 20px) {
margin: $margin;
float: left;
}
.box {
@include shape(0, #d32, 150px);
@include spacing();
}
.rounded-box {
@include shape(20px, #eddd23, 150px);
@include spacing(20px 70px);
}
.circle {
@include shape(75px, pink, 150px);
@include spacing();
}
.box {
background-color: #d32;
border-radius: 0;
width: 150px;
height: 150px;
margin: 20px;
float: left;
}
.rounded-box {
background-color: #eddd23;
border-radius: 20px;
width: 150px;
height: 150px;
margin: 20px 70px;
float: left;
}
.circle {
background-color: pink;
border-radius: 75px;
width: 150px;
height: 150px;
margin: 20px;
float: left;
}
<div class="box"></div>
<div class="rounded-box"></div>
<div class="circle"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment