sass/partials/_mixin.scss
// basic reset
@mixin reset {
margin:0;padding:0;
}
//clear fix
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
//font-size and line height with rem and px fallback
@mixin fontsize($size:1.6, $line: $size * 1.5){
font-size: ($size * 10) + px;
line-height: ($line * 10) + px;
font-size: $size + rem;
line-height: $line + rem;
}
//vertical align anything
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
//mediaquery shorthand - mobile first approach
@mixin respond-to($breakpoint) {
@media all and (min-width: $breakpoint + px) { @content; }
}