add mixins

This commit is contained in:
Ray Elliott 2020-05-24 14:26:40 +01:00
parent 30fd46b213
commit e23e8b5d4f
2 changed files with 54 additions and 0 deletions

47
src/scss/_mixins.scss Normal file
View File

@ -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;
}

View File

@ -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;
}