Created
November 21, 2010 21:42
-
-
Save founddrama/709178 to your computer and use it in GitHub Desktop.
On parameterized Sass mixins
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.my-class { | |
/* fallback for browsers that do not support CSS3 */ | |
background: #222; | |
/* -moz requires "px" or % after the stop # */ | |
background: -moz-linear-gradient(top, #666, #222 32px); | |
/* -webkit does not require "px" after the stop $ */ | |
background: -webkit-gradient(linear, 0 0, 0 32, from(#666), to(#222)); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin basic-linear-grader($base_color, $accent_color, $stop) { | |
// -moz gets the same $stop | |
$_moz_stop: $stop; | |
@if unitless($stop) { | |
// but we tack on the "px" if it's missing | |
$_moz_stop: #{$stop}px; | |
} | |
background: $base_color; | |
background: -moz-linear-gradient(top, $accent_color, $base_color $_moz_stop); | |
background: -webkit-gradient(linear, 0 0, 0 $stop, from($accent_color), to($base_color)); | |
} | |
.my-class { | |
@include basic-linear-grader(#000, #666, 32); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@see
http://blog.founddrama.net/2010/09/on-parameterized-sass-mixins/