Skip to content

Instantly share code, notes, and snippets.

Embed
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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.