HTML and CSS Reference
In-Depth Information
To achieve this, you can pass parameters into mixins. You can now produce
CSS gradients anywhere in your SASS file in a single line using the following
code.
@mixin gradient($start, $stop, $degrees) {
background: rgba($start, 1);
background: -moz-linear-gradient($degrees, $start 0%, $stop 100%);
background: -webkit-gradient(linear, left top, right bottom,
color-stop(0%, $start), color-stop(100%, $stop));
background: -o-linear-gradient($degrees, $start 0%,$stop 100%);
background: -ms-linear-gradient($degrees, $start 0% $stop 100%);
background: linear-gradient($degrees, $start 0%, $stop 100%);
}
#my-first-element {
@include gradient(rgba(206,220,231,0.5), rgba(89,106,114,1), -45deg);
}
#my-second-element {
@include gradient(rgba(206,220,231,1), rgba(89,106,114,1), -45deg);
}
As you can see, you first define a mixin called
gradient
that takes three
parameters:
$start
,
$stop
, and
$degrees
. Within this mixin, you first define the
standard background for devices that do not support gradients. You define the
value of the background color using the
rgba
SASS function. In here, you
explicitly set the background color to be the start color with no alpha
transparency. Using the following lines, you simply pass in the start color, stop
color, and degrees to the appropriate vendor gradient declarations. You can
now pull the gradient with the parameters anywhere in your stylesheet using
@include gradient(start-color, finish-color, degrees);
. The resulting CSS
looks like the following.
#my-first-element {
background: #cedce7;
background: -moz-linear-gradient(-45deg, rgba(206, 220, 231, 0.5) 0%, #596a72
100%);
background: -webkit-gradient(linear, left top, right bottom,
color-stop(0%, rgba(206, 220, 231, 0.5)), color-stop(100%, #596a72));
background: -o-linear-gradient(-45deg, rgba(206, 220, 231, 0.5) 0%, #596a72
100%);
background: -ms-linear-gradient(-45deg, rgba(206, 220, 231, 0.5) 0% #596a72
100%);
background: linear-gradient(-45deg, rgba(206, 220, 231, 0.5) 0%, #596a72
100%); }
#my-second-element {
background: #cedce7;
background: -moz-linear-gradient(-45deg, #cedce7 0%, #596a72 100%);
