SCSS Mixins Template

// Center block @mixin center-block { display: block; margin-left: auto; margin-right: auto; } // Clearfix @mixin clearfix() { content: ""; display: table; table-layout: fixed; } // Clear after (not all clearfix need this also) @mixin clearfix-after() { clear: both; } @mixin no-select() { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @mixin flex() { display: -webkit-box; display: -ms-flexbox; display: flex; } @mixin flex-wrap($wrap) { -ms-flex-wrap: $wrap; flex-wrap: $wrap; } @mixin flex-basis($basis) { -ms-flex-preferred-size: $basis; flex-basis: $basis; } @mixin flex-direction($dir) { @if $dir=="row" { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } @else { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @mixin flex-grow($grow) { -webkit-box-flex: $grow; -ms-flex-positive: $grow; flex-grow: $grow; } @mixin align-items($position) { -webkit-box-align: $position; -ms-flex-align: $position; align-items: $position; } @mixin justify-content($position) { -webkit-box-pack: $position; -ms-flex-pack: $position; justify-content: $position; } @mixin border-box() { -webkit-box-sizing: border-box; box-sizing: border-box; } //Breakpoints @mixin breakpoint($point) { @if $point==landscape { @media all and (orientation: landscape) { @content; } } @else if $point==extralarge { @media all and (min-width: 1500px) { @content; } } @else if $point==large { @media all and (min-width: 1200px) { @content; } } @else if $point==medium { @media all and (min-width: 992px) { @content; } } @else if $point==small { @media all and (min-width: 768px) { @content; } } @else if $point==$point { @media all and (min-width: $point) { @content; } } } //Border radius @mixin border-radius($top-left, $top-right, $bottom-right, $bottom-left) { border-radius: $top-left $top-right $bottom-right $bottom-left; -webkit-border-radius: $top-left $top-right $bottom-right $bottom-left; -moz-border-radius: $top-left $top-right $bottom-right $bottom-left; -ms-border-radius: $top-left $top-right $bottom-right $bottom-left; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } //Postion absolute @mixin position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto) { position: absolute; top: $top; right: $right; bottom: $bottom; left: $left; } //Box shadow @mixin box-shadow($shadow) { box-shadow: $shadow; -webkit-box-shadow: $shadow; -moz-box-shadow: $shadow; -ms-box-shadow: $shadow; } //Transform translate x and y @mixin transform-translate($x, $y) { transform: translate($x, $y); -webkit-transform: translate($x, $y); -moz-transform: translate($x, $y); -ms-transform: translate($x, $y); } //Transform translate y @mixin transform-translateY($y) { transform: translateY($y); -webkit-transform: translateY($y); -moz-transform: translateY($y); -ms-transform: translateY($y); } //Transform translate x @mixin transform-translateX($x) { transform: translateX($x); -webkit-transform: translateX($x); -moz-transform: translateX($x); -ms-transform: translateX($x); } //Transform Scale @mixin transform-scale($x, $y) { transform: scale($x, $y); -webkit-transform: scale($x, $y); -moz-transform: scale($x, $y); -ms-transform: scale($x, $y); } //Transform rotate @mixin transform-rotate($rotate) { transform: rotate($rotate); -webkit-transform: rotate($rotate); -moz-transform: rotate($rotate); -ms-transform: rotate($rotate); } //Transform rotate X @mixin transform-rotateX($rotate) { transform: rotateX($rotate); -webkit-transform: rotateX($rotate); -moz-transform: rotateX($rotate); -ms-transform: rotateX($rotate); } //Transform rotate Y @mixin transform-rotateY($rotate) { transform: rotateY($rotate); -webkit-transform: rotateY($rotate); -moz-transform: rotateY($rotate); -ms-transform: rotateY($rotate); } //Transform Multiple @mixin transform-multiple($multiple) { transform: $multiple; -webkit-transform: $multiple; -moz-transform: $multiple; -ms-transform: $multiple; } //Single Tansition @mixin transition-single($transition) { transition: $transition; -webkit-transition: $transition; -moz-transition: $transition; -ms-transition: $transition; } //Transition @mixin transition($transition1, $transition2, $transition3) { transition: $transition1, $transition2, $transition3; -webkit-transition: $transition1, $transition2, $transition3; -moz-transition: $transition1, $transition2, $transition3; -ms-transition: $transition1, $transition2, $transition3; } //Filter @mixin filter($filter) { filter: $filter; -webkit-filter: $filter; }