Here’s some SASS Mixins I’ve collected over the years.
Anti-Alias
@mixin antialias {
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Highlights
@mixin selection {
::-moz-selection { @content; }
::selection { @content; }
}
Unselectable
@mixin unselectable {
-webkit-touch-callout: none;
user-select: none;
}
Reset Box
@mixin reset-box {
padding: 0;
margin: 0;
}
Rem font output with px fallback
@mixin font-size($sizeValue: 1) {
font-size: ($sizeValue * 16) * 1px;
font-size: $sizeValue * 1rem;
}
Center block
@mixin center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Another way to center things
@mixin centerer($horizontal: true, $vertical: true) {
position: absolute;
@if ($horizontal and $vertical) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@else if ($horizontal) {
left: 50%;
transform: translate(-50%, 0);
}
@else if ($vertical) {
top: 50%;
transform: translate(0, -50%);
}
}
Box Shadow
@mixin box-shadow($params) {
-webkit-box-shadow: $params;
-moz-box-shadow: $params;
box-shadow: $params;
}
Aspect Ratio
@mixin aspect-ratio($width, $height) {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: ($height / $width) * 100%;
}
> .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
Rounded edges/corners
@mixin border-radius($radius: 0.5em, $important: false) {
@if $important {
-webkit-border-radius: $radius !important;
-moz-border-radius: $radius !important;
border-radius: $radius !important;
}
@else {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
}
Clearfix (Inline)
@mixin clearfix() {
content: "";
display: table;
}
Clearfix (::after)
@mixin cf {
&::after {
content: '';
display: table;
clear: both;
}
}
Hide from Screen-readers
@mixin hidden {
display: none;
visibility: hidden;
}
Generic Transform
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
Transition
@mixin transition($args) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
Filters
Blur
@mixin blur($amount) {
filter: blur($amount);
-webkit-filter: blur($amount);
}
Black and White
@mixin greyscale($amount) {
filter: grayscale($amount);
-webkit-filter: grayscale($amount);
}
Rotate
@mixin rotate($deg) {
@include transform(rotate(#{$deg}deg));
}
Opacity
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
Truncate String
@mixin text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Pseudo Content
@mixin pseudo($display: block, $pos: absolute, $content: ''){
content: $content;
display: $display;
position: $pos;
}
Foundation Breakpoint Media Queries
@mixin size-real-medium {
@media only screen and (max-width: 64em) {
@content;
}
}
@mixin size-real-large {
@media only screen and (min-width: 64em) {
@content;
}
}
@mixin size-large {
@media only screen and (min-width: 40em) {
@content;
}
}
@mixin size-small {
@media only screen and (max-width: 39.9375em) {
@content;
}
}
@mixin size-real-small {
@media only screen and (max-width: 30em) {
@content;
}
}
Custom Media Queries Alternative
$breakpoints: (
"phone": 400px,
"phone-wide": 480px,
"phablet": 560px,
"tablet-small": 640px,
"tablet": 768px,
"tablet-wide": 1024px,
"desktop": 1248px,
"desktop-wide": 1440px
);
@mixin mq($width, $type: min) {
@if map_has_key($breakpoints, $width) {
$width: map_get($breakpoints, $width);
@if $type == max {
$width: $width - 1px;
}
@media only screen and (#{$type}-width: $width) {
@content;
}
}
}
// Z-Indexes
@function z($name) {
@if index($z-indexes, $name) {
@return (length($z-indexes) - index($z-indexes, $name)) + 1;
} @else {
@warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
@return null;
}
}
$z-indexes: (
"outdated-browser",
"modal",
"site-header",
"page-wrapper",
"site-footer"
);
Hardware Acceleration
@mixin hardware($backface: true, $perspective: 1000) {
@if $backface {
backface-visibility: hidden;
}
perspective: $perspective;
}
Remove Margins From Top/Bottom
@mixin content-margins($selector: '> *', $last-child: false) {
@if not $selector {
$selector: '&';
}
#{unquote($selector)} {
&:first-child { margin-top: 0; }
@if $last-child {
&:last-child { margin-bottom: 0; }
}
}
}
Retina Images
@mixin retina {
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3 / 2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx) {
@content;
}
}
Gradients
@function convert-angle($value, $unit) {
$convertable-units: deg grad turn rad;
$conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);
@if index($convertable-units, unit($value)) and index($convertable-units, $unit) {
@return $value / nth($conversion-factors, index($convertable-units, unit($value))) * nth($conversion-factors, index($convertable-units, $unit));
}
@warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";
}
@function is-direction($value) {
$is-direction: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
$is-angle: type-of($value)=='number' and index('deg' 'grad' 'turn' 'rad', unit($value));
@return $is-direction or $is-angle;
}
@function legacy-direction($value) {
@if is-direction($value)==false {
@warn "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be an angle or a direction";
}
$conversion-map: ( to top: bottom, to top right: bottom left, to right top: left bottom, to right: left, to bottom right: top left, to right bottom: left top, to bottom: top, to bottom left: top right, to left bottom: right top, to left: right, to left top: right bottom, to top left: bottom right);
@if map-has-key($conversion-map, $value) {
@return map-get($conversion-map, $value);
}
@return 90deg - convert-angle($value, 'deg');
}
@mixin linear-gradient($direction, $color-stops...) {
@if is-direction($direction)==false {
$color-stops: ($direction, $color-stops);
$direction: 180deg;
}
background: nth(nth($color-stops, 1), 1);
background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
background: linear-gradient($direction, $color-stops);
}
CSS Triangles
@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
@include pseudo($pos: $position);
width: 0;
height: 0;
@if $round {
border-radius: 3px;
}
@if $direction == down {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size solid $color;
margin-top: 0 - round( $size / 2.5 );
} @else if $direction == up {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $color;
margin-bottom: 0 - round( $size / 2.5 );
} @else if $direction == right {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
margin-right: -$size;
} @else if $direction == left {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right: $size solid $color;
margin-left: -$size;
}
}
Fade Animation
@-webkit-keyframes fade_up {
0% {
@include opacity(0);
@include transform(translate(0, 70px));
}
100% {
@include transition(transform 1.1s ease-out);
@include transform(translate(0, 0));
@include opacity(1);
}
}
@keyframes fade_up {
0% {
@include opacity(0);
@include transform(translate(0, 70px));
}
100% {
@include transition(transform 1.1s ease-out);
@include transform(translate(0, 0));
@include opacity(1);
}
}
.animate {
@include opacity(0);
@include transform(translate(0, 100px));
-webkit-animation-duration: 1.1s;
animation-duration: 1.1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
&.reveal {
-webkit-animation-name: fade_up;
animation-name: fade_up;
}
}
Small Big Animation
@keyframes smallbig {
0%,
100% {
@include transform(scale(1));
}
50% {
@include transform(scale(0));
}
}