Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
8 Sass mixins you must have in your toolbox (via Z63: http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/)

8 Sass mixins you must have in your toolbox

Via Z63: http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/

Animations & Keyframes

Usage:

@include keyframes(slide-down) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}

.element {
  width: 100px;
  height: 100px;
  background: black;
  @include animation('slide-down 5s 3');
}

SVG background images with PNG and retina fallback

Usage:

body {
  @include background-image('pattern');
}

Breakpoints

Usage:

.sidebar {
  width: 60%
  float: left;
  margin: 0 2% 0 0;
  @include bp-small {
    width: 100%;
    float: none;
    margin: 0;
  }
}

Set a rem font size with pixel fallback

Usage:

p {
  @include font-size(14px)
}

Clearfix

Usage:

.container-with-floated-children {
  @extend %clearfix;
}

Cross browser opacity

Usage:

.faded-text {
  @include opacity(0.8);
}

Transitions

Usage:

a {
  color: gray;
  @include transition(color .3s ease);
  &:hover {
    color: black;
  }
}

Visually hide an element

Usage:

.visually-hidden {
  @extend %visuallyhidden;
}
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@-ms-keyframes $animation-name {
@content;
}
@-o-keyframes $animation-name {
@content;
}
@keyframes $animation-name {
@content;
}
}
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
$image-path: '../img' !default;
$fallback-extension: 'png' !default;
$retina-suffix: '@2x';
@mixin background-image($name, $size:false) {
background-image: url(#{$image-path}/#{$name}.svg);
@if($size) {
background-size: $size;
}
.no-svg & {
background-image: url(#{$image-path}/#{$name}.#{$fallback-extension});
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
background-image: url(#{$image-path}/#{$name}#{$retina-suffix}.#{$fallback-extension});
}
}
}
@mixin bp-large {
@media only screen and (max-width: 60em) {
@content;
}
}
@mixin bp-medium {
@media only screen and (max-width: 40em) {
@content;
}
}
@mixin bp-small {
@media only screen and (max-width: 30em) {
@content;
}
}
@function calculateRem($size) {
$remSize: $size / 16px;
@return $remSize * 1rem;
}
@mixin font-size($size) {
font-size: $size;
font-size: calculateRem($size);
}
%clearfix {
*zoom: 1;
&:before, &:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
%visuallyhidden {
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip: rect(0, 0, 0, 0);
position: absolute;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment