HTML and CSS Reference
In-Depth Information
background: -webkit-gradient(linear, left top, right bottom,
color-stop(0%, #cedce7), color-stop(100%, #596a72));
background: -o-linear-gradient(-45deg, #cedce7 0%, #596a72 100%);
background: -ms-linear-gradient(-45deg, #cedce7 0% #596a72 100%);
background: linear-gradient(-45deg, #cedce7 0%, #596a72 100%); }
Notice how the CSS in
#my-first-element
has the background color in the first
descriptor as a regular hex color and the rest are RGBA colors. In addition, even
though the stop color was set using RGBA in the mixin call, it is also a hex color,
as the opacity has been set to 1 while the start color was set to 0.5. SASS will
pick the most efficient way to output your colors.
Selector Inheritance
Of course, it is tempting to use mixins throughout your SASS file, even though
the CSS may well be exactly the same. Selector inheritance allows you to use
the same CSS rules in a rule placed elsewhere in the SASS file. For instance, in
CSS you can use the following.
.my-element-one, .my-element-two, .my-element-three {
/** insert common CSS style here **/
}
While efficient, it can be easy to lose track of which CSS rules are associated
with a group of rules. You might have to hunt around the document to find that
group of rules and which elements, classes, and ids are associated with it. To
add to the confusion, styles could be located in separate CSS files.
Selector inheritance helps to overcome this. Selector inheritance allows you to
generate the same code as just shown, but in a much more developer-friendly
way.
Using the example from the mixins section, you can define one type of gradient
and use it anywhere in your SASS file on related rules without the resulting
gradient being generated more than once in the CSS file.
.block {
@include gradient(rgba(206,220,231,0.5), rgba(89,106,114,1), -45deg);
}
.sidebar-block {
border-radius: 10px;
@extend .block;
}
As you can see, the
.sidebar-block
is similar to the
.block
rule, aside from the
rounded border. The resulting CSS looks like the following.
