react/docs/_css/bourbon/css3/_background.scss

56 lines
1.7 KiB
SCSS
Raw Normal View History

2013-05-30 03:46:11 +08:00
//************************************************************************//
// Background property for adding multiple backgrounds using shorthand
// notation.
//************************************************************************//
2014-08-14 02:20:00 +08:00
@mixin background($backgrounds...) {
$webkit-backgrounds: ();
$spec-backgrounds: ();
2013-05-30 03:46:11 +08:00
2014-08-14 02:20:00 +08:00
@each $background in $backgrounds {
$webkit-background: ();
$spec-background: ();
$background-type: type-of($background);
2013-05-30 03:46:11 +08:00
2014-08-14 02:20:00 +08:00
@if $background-type == string or list {
$background-str: if($background-type == list, nth($background, 1), $background);
2013-05-30 03:46:11 +08:00
2014-08-14 02:20:00 +08:00
$url-str: str-slice($background-str, 0, 3);
$gradient-type: str-slice($background-str, 0, 6);
2013-05-30 03:46:11 +08:00
2014-08-14 02:20:00 +08:00
@if $url-str == "url" {
$webkit-background: $background;
$spec-background: $background;
}
2013-05-30 03:46:11 +08:00
2014-08-14 02:20:00 +08:00
@else if $gradient-type == "linear" {
$gradients: _linear-gradient-parser("#{$background}");
$webkit-background: map-get($gradients, webkit-image);
$spec-background: map-get($gradients, spec-image);
}
2013-05-30 03:46:11 +08:00
2014-08-14 02:20:00 +08:00
@else if $gradient-type == "radial" {
$gradients: _radial-gradient-parser("#{$background}");
$webkit-background: map-get($gradients, webkit-image);
$spec-background: map-get($gradients, spec-image);
2013-05-30 03:46:11 +08:00
}
2014-08-14 02:20:00 +08:00
2013-05-30 03:46:11 +08:00
@else {
2014-08-14 02:20:00 +08:00
$webkit-background: $background;
$spec-background: $background;
2013-05-30 03:46:11 +08:00
}
}
2014-08-14 02:20:00 +08:00
@else {
$webkit-background: $background;
$spec-background: $background;
2013-05-30 03:46:11 +08:00
}
2014-08-14 02:20:00 +08:00
$webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
$spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
2013-05-30 03:46:11 +08:00
}
2014-08-14 02:20:00 +08:00
background: $webkit-backgrounds;
background: $spec-backgrounds;
}