add mixins

src/scss/_mixins.scss

@@ -0,0 +1,47 @@
+// box shadow for elements
+@mixin box-shadow($color: rgba(#000, 0.1)) {
+	box-shadow: 1px 3px 4px 0 $color;
+}
+
+// margin/padding vertical spacing mixins
+@mixin margin-t($amount) {
+	margin-top: #{$amount * $line-height}rem;
+}
+
+@mixin margin-b($amount) {
+	margin-bottom: #{$amount * $line-height}rem;
+}
+
+@mixin margin-v($top, $bottom: $top) {
+	@include mt($top);
+	@include mb($bottom);
+}
+
+@mixin pad-t($amount) {
+	padding-top: #{$amount * $line-height}rem;
+}
+
+@mixin pad-b($amount) {
+	padding-bottom: #{$amount * $line-height}rem;
+}
+
+@mixin pad-l($amount) {
+	padding-left: #{$amount * $line-height}rem;
+}
+
+@mixin pad-r($amount) {
+	padding-right: #{$amount * $line-height}rem;
+}
+
+@mixin pad-v($top, $bottom: $top) {
+	@include pt($top);
+	@include pb($bottom);
+}
+
+@mixin pad($amount-t, $amount-r: $amount-t, $amount-b: $amount-t, $amount-l: $amount-r) {
+	padding: #{$amount-t * $line-height}rem
+		#{$amount-r * $line-height}rem
+		#{$amount-b * $line-height}rem
+		#{$amount-l * $line-height}rem;
+}
+

src/scss/style.scss

@@ -1,5 +1,8 @@
 @import "variables";
+@import "mixins";
+
 @import "reset";
+
 @import "typography";
 @import "base";
 @import "layout";
@@ -35,3 +38,7 @@
 .a {
 	@extend a;
 }
+
+.button {
+	@extend button;
+}