Skip to content

Instantly share code, notes, and snippets.

@mwawrusch
Created November 25, 2011 07:06
Show Gist options
  • Save mwawrusch/1392974 to your computer and use it in GitHub Desktop.
Save mwawrusch/1392974 to your computer and use it in GitHub Desktop.
Some mixins for SASS
$useIEFilters: 1
// might be 0 or 1. disabled by default.
=border-radius($values)
-moz-border-radius: $values
-webkit-border-radius: $values
border-radius: $values
=border-bottom-left-radius($values)
-moz-border-radius-bottomleft: $values
-webkit-border-bottom-left-radius: $values
border-bottom-left-radius: $values
=border-bottom-right-radius($values)
-moz-border-radius-bottomright: $values
-webkit-border-bottom-right-radius: $values
border-bottom-right-radius: $values
=border-top-left-radius($values)
-moz-border-radius-topleft: $values
-webkit-border-top-left-radius: $values
border-top-left-radius: $values
=border-top-right-radius($values)
-moz-border-radius-topright: $values
-webkit-border-top-right-radius: $values
border-top-right-radius: $values
=box-shadow-no()
-moz-box-shadow: none
-o-box-shadow: none
-webkit-box-shadow: none
box-shadow: none
=box-shadow($x, $y, $offset, $hex, $ie: $useIEFilters)
-moz-box-shadow: $x $y $offset $hex
-o-box-shadow: $x $y $offset $hex
-webkit-box-shadow: $x $y $offset $hex
box-shadow: $x $y $offset $hex
@if $ie == 1
$iecolor: "#" + red($hex) + green($hex) + blue($hex)
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}')
-ms-filter: quote(progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}'))
=linear-gradient($from, $to, $ie: $useIEFilters)
@if $ie != 1
background-color: $to
background-image: -moz-linear-gradient($from, $to)
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $from),color-stop(1, $to))
background-image: -webkit-linear-gradient($from, $to)
background-image: -o-linear-gradient($from, $to)
@if $ie == 1
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}')
-ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}'))
=rgba($hex, $alpha, $ie: $useIEFilters)
@if $ie == 1
$hexopac: "#" + ceil($alpha * 255 / 16 * 10) + $hex
background-color: none
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$hexopac}',EndColorStr='#{$hexopac}}')
-ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$hexopac}',EndColorStr='#{$hexopac}'))
@else
background-color: $hex
background-color: rgba(red($hex), green($hex), blue($hex), $alpha)
=rotate($deg, $ie: $useIEFilters)
-moz-transform: rotate(#{$deg}deg)
-o-transform: rotate(#{$deg}deg)
-webkit-transform: rotate(#{$deg}deg)
@if $ie == 1
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.99144486137381, M12=--0.130526192220052, M21=0.130526192220052, M22=0.99144486137381)
-ms-filter: quote(progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.99144486137381, M12=--0.130526192220052, M21=0.130526192220052, M22=0.99144486137381))
zoom: 1
=transition($value)
-moz-transition: $value
-o-transition: $value
-webkit-transition: $value
transition: $value
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment