Skip to content

Instantly share code, notes, and snippets.

@purzlbaum
Created February 3, 2014 15:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save purzlbaum/8785712 to your computer and use it in GitHub Desktop.
Save purzlbaum/8785712 to your computer and use it in GitHub Desktop.
Some SASS mixins
// Retina ready images
@mixin at2x($image_name, $w: auto, $h: auto, $extention: '.png')
background-image: url($image_name + $extention)
$x2img : $image_name + '@2x' + $extention
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
background-image: url($x2img)
-webkit-background-size: $w $h
-moz-background-size: $w $h
-o-background-size: $w $h
background-size: $w $h
@media only screen and (max-device-width : 1024px)
background-image: url($x2img)
-webkit-background-size: $w $h
-moz-background-size: $w $h
-o-background-size: $w $h
background-size: $w $h
// Mixin for box-sizing
@mixin box-sizing($sizing)
-webkit-box-sizing: $sizing
-moz-box-sizing: $sizing
-ms-box-sizing: $sizing
-o-box-sizing: $sizing
box-sizing: $sizing
// Mixin for border-radius top (right, left), bottom (right, left)
@mixin border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
-o-border-radius: $radius
border-radius: $radius
// Mixin for border-radius top (right, left)
@mixin border-radius-top($radius)
-webkit-border-top-left-radius: $radius
-webkit-border-top-right-radius: $radius
-moz-border-radius-topleft: $radius
-moz-border-radius-topright: $radius
-ms-border-radius-topleft: $radius
-ms-border-radius-topright: $radius
-o-border-radius-topleft: $radius
-o-border-radius-topright: $radius
border-top-left-radius: $radius
border-top-right-radius: $radius
// Mixin for border-radius top (right)
@mixin border-radius-top-right($radius)
-webkit-border-top-right-radius: $radius
-moz-border-radius-topright: $radius
-ms-border-radius-topright: $radius
-o-border-radius-topright: $radius
border-top-right-radius: $radius
// Mixin for border-radius top (left)
@mixin border-radius-top-left($radius)
-webkit-border-top-left-radius: $radius
-moz-border-radius-topleft: $radius
-ms-border-radius-topleft: $radius
-o-border-radius-topleft: $radius
// Mixin for border-radius bottom (left, right)
@mixin border-radius-bottom($radius)
-webkit-border-bottom-left-radius: $radius
-webkit-border-bottom-right-radius: $radius
-moz-border-radius-bottomleft: $radius
-moz-border-radius-bottomright: $radius
-ms-border-radius-bottomleft: $radius
-ms-border-radius-bottomright: $radius
-o-border-radius-bottomleft: $radius
-o-border-radius-bottomright: $radius
border-bottom-left-radius: $radius
border-bottom-right-radius: $radius
border-top-left-radius: $radius
// Mixin for border-radius top (left), bottom (left)
@mixin border-radius-left($radius)
-webkit-border-top-left-radius: $radius
-webkit-border-bottom-left-radius: $radius
-moz-border-radius-topleft: $radius
-moz-border-radius-bottomleft: $radius
-ms-border-radius-topleft: $radius
-ms-border-radius-bottomleft: $radius
-o-border-radius-topleft: $radius
-o-border-radius-bottomleft: $radius
border-top-left-radius: $radius
border-bottom-left-radius: $radius
// Mixin for border-radius top (right), bottom (right)
@mixin border-radius-right($radius)
-webkit-border-top-right-radius: $radius
-webkit-border-bottom-right-radius: $radius
-moz-border-radius-topright: $radius
-moz-border-radius-bottomright: $radius
-ms-border-radius-topright: $radius
-ms-border-radius-bottomright: $radius
-o-border-radius-topright: $radius
-o-border-radius-bottomright: $radius
border-top-right-radius: $radius
border-bottom-right-radius: $radius
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment