HTML and CSS Reference
In-Depth Information
.block, .sidebar-block {
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%); }
.sidebar-block {
border-radius: 10px; }
You can see that SASS has separated the
border-radius
property and placed it
within its own CSS rule for
.sidebar-block
.
You can also add chained classes to the block element and it will generate the
edge cases for both the
.sidebar-block
and
.block
rules.
/**
* mobile.scss
*/
.block {
@include gradient(rgba(206,220,231,0.5), rgba(89,106,114,1), -45deg);
}
.block.wide {
width: 100px;
}
.sidebar-block {
border-radius: 10px;
@extend .block;
}
/**
* mobile.css
*/
.block, .sidebar-block {
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));
