Extends

Sometimes, you define various classes that share a common definition. With the @extend feature, you can define a common class and make others extend from it instead of copying the same code in each one:

SASS example:

.block { margin: 25px 58px; }

p {
@extend .block;
border: 3px solid #00FF00;
}

ol {
@extend .block;
color: #FF0000;
text-transform: lowercase;
}

LESS:

.block { margin: 25px 58px; }

p {
&:extend(.block);
border: 3px solid #00FF00;
}

ol {
&:extend(.block);
color: #FF0000;
text-transform: lowercase;
}

CSS output:

.block, p, ul, ol { margin: 10px 5px; }

p { border: 1px solid #eee; }
ul, ol { color: #333; text-transform: uppercase; }
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset