HTML and CSS Reference
In-Depth Information
.myelement, .mysecondelement {
background: rgb(206,220,231);
background: -moz-linear-gradient(-45deg,
rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%);
background: -webkit-gradient(linear, left top, right bottom,
color-stop(0%,rgba(206,220,231,1)),
color-stop(100%,rgba(89,106,114,1)));
background: -o-linear-gradient(-45deg,
rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%);
background: -ms-linear-gradient(-45deg,
rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%);
background: linear-gradient(-45deg,
rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%);
}
You could use a mixin to define the gradient and include it in your styles using
the following code.
@mixin specialgradient {
background: rgb(206,220,231);
background: -moz-linear-gradient(-45deg,
rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%);
background: -webkit-gradient(linear, left top, right bottom,
color-stop(0%,rgba(206,220,231,1)), color-stop(100%, rgba(89,106,114,1)));
background: -o-linear-gradient(-45deg, rgba(206,220,231,1) 0%,
rgba(89,106,114,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(206,220,231,1) 0%,
rgba(89,106,114,1) 100%);
background: linear-gradient(-45deg, rgba(206,220,231,1) 0%,
rgba(89,106,114,1) 100%);
}
#my-first-element {
@include specialgradient;
}
#my-second-element {
@include specialgradient;
}
However, that would be a bad idea, as the resulting CSS would include the
gradient twice in the stylesheet, which increases bloat and isn't what we want.
Selector inheritance should be the preferred option for this. Mixins come in
handy when you have a chunk of CSS that will be repeated in other CSS rules,
or, even better, when you have CSS that is repeated throughout your stylesheet,
such as vendor-specific styles (e.g., gradients and border images) that require
the same CSS to be defined several times for each browser.
Search WWH ::




Custom Search