Skip to content

Instantly share code, notes, and snippets.

@dennisschipper
Created January 2, 2012 11:13
Show Gist options
  • Save dennisschipper/1550318 to your computer and use it in GitHub Desktop.
Save dennisschipper/1550318 to your computer and use it in GitHub Desktop.
Sass Mixins
A {
-moz-transition: all 0.5s ease-in-out .2s;
-webkit-transition: all 0.5s ease-in-out .2s;
-ms-transition: all 0.5s ease-in-out .2s;
-o-transition: all 0.5s ease-in-out .2s;
transition: all 0.5s ease-in-out .2s;
}
A:hover {
color: #006699;
}
A {
-moz-transition: all 1s ease-in-out 0.2s;
-webkit-transition: all 1s ease-in-out 0.2s;
-ms-transition: all 1s ease-in-out 0.2s;
-o-transition: all 1s ease-in-out 0.2s;
transition: all 1s ease-in-out 0.2s; }
A:hover {
color: #006699; }
@mixin default_transition($time, $effect, $delay) {
-moz-transition: all $time $effect $delay;
-webkit-transition: all $time $effect $delay;
-ms-transition: all $time $effect $delay;
-o-transition: all $time $effect $delay;
transition: all $time $effect $delay;
}
A {
@include default_transition(0.5s, ease-in-out, 0.2s)
}
A:hover {
color: #006699;
}
@mixin default_transition($time : 0.2s, $effect : ease-in-out, $delay : 0.2s) {
-moz-transition: all $time $effect $delay;
-webkit-transition: all $time $effect $delay;
-ms-transition: all $time $effect $delay;
-o-transition: all $time $effect $delay;
transition: all $time $effect $delay;
}
A { /* pass values to the mixin */
@include default_transition(1s, ease-in-out, 0.2s)
}
A { /* or leave this empty it will use the default values */
@include default_transition
}
A:hover {
color: #006699;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment