public
Created

sass mixin functions

  • Download Gist
common.sass
Sass
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
@mixin border-radius($radius:3px)
:-moz-border-radius $radius
:-webkit-border-radius $radius
:border-radius $radius
 
@mixin border-radius-left($radius:3px)
:border-top-left-radius $radius
:-moz-border-radius-topleft $radius
:-webkit-border-top-left-radius $radius
:border-bottom-left-radius $radius
:-moz-border-radius-bottomleft $radius
:-webkit-border-bottom-left-radius $radius
 
 
@mixin linear-gradient($from:rgba(255,255,255,1.0), $to:rgba(0,0,0,1.0))
:background -moz-linear-gradient(top,$from,$to)
:background -webkit-gradient(linear,left top, left bottom, from($from), to($to))
:background linear-gradient(top,$from,$to)
 
@mixin translate($x: 0px, $y: 100px)
:-moz-transform translate($x, $y)
:-webkit-transform translate($x, $y)
:transform translate($x, $y)
 
@mixin skew($x: 30deg, $y: 0deg)
:-moz-transform skew($x, $y)
:-webkit-transform skew($x, $y)
:transform skew($x, $y)
 
@mixin scale($scale: 1.5)
:-moz-transform scale($scale)
:-webkit-transform scale($scale)
:transform scale($scale)
 
@mixin rotate($degree: 0deg)
:-moz-transform rotate($degree)
:-webkit-transform rotate($degree)
:transform rotate($degree)
 
@mixin rotateX($degree: 0deg)
:-moz-transform rotateX($degree)
:-webkit-transform rotateX($degree)
:transform rotateX($degree)
 
@mixin rotateY($degree: 0deg)
:-moz-transform rotateY($degree)
:-webkit-transform rotateY($degree)
:transform rotateY($degree)
 
@mixin rotateZ($degree: 0deg)
:-moz-transform rotateZ($degree)
:-webkit-transform rotateZ($degree)
:transform rotateZ($degree)
 
@mixin transform-origin($h: center, $v: center)
:-moz-transform-origin $h $v
:-webkit-transform-origin $h $v
:-o-transform-origin $h $v
:-ms-transform-origin $h $v
 
@mixin transition($property: all, $speed: 0.5s, $easing: ease)
:-webkit-transition $property $speed $easing
:-moz-transition $property $speed $easing
:-o-transition $property $speed $easing
:transition $property $speed $easing
 
@mixin boxshadow($x: 3px, $y: 3px, $shade: 5px, $spread: 0px, $color: #777)
:-webkit-box-shadow $x $y $shade $spread $color
:-moz-box-shadow $x $y $shade $spread $color
:box-shadow $x $y $shade $spread $color
 
@mixin boxgradient($from: #444444, $to: #999999)
:background-color $from
:background-image -webkit-gradient(linear, left top, left bottom, from($from), to($to))
:background-image -webkit-linear-gradient(top, from($from), to($to))
:background-image -moz-linear-gradient(top, from($from), to($to))
:background-image -ms-linear-gradient(top, from($from), to($to))
:background-image -o-linear-gradient(top, from($from), to($to))
:background-image linear-gradient(top, from($from), to($to))
 
@mixin box()
:display -webkit-box
:display -moz-box
:display box

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.