derek-skinner/Inflame

View on GitHub
sass/partials/_mixin.scss

Summary

Maintainability
Test Coverage
// 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; }
}