CSS Master

(Primo) #1
-moz-transition: height 500ms linear;
transition: height 500ms linear;
}

Sassmixinsdon’thavetoacceptparameters,however.Let’suseour.dibexample
fromtheprevioussection:


@mixin .dib {
display: inline-block;
}

p {
@include dib;
font-size: 16px;
}

Thisproducesthefollowingoutput:


p {
display: inline-block;
}

Again,SassneverincludesthemixininthecompiledCSS.Ifyoudidwishtoinclude
it,[email protected]’sdiscussedinthenextsection.


Extending Selectors


Finally,let’stalkaboutextendingCSSselectors.ThesyntaxofLessandSassdiverge
hereaswell,buttheconceptisverysimilar.Extendingisawaytocombinemultiple
selectorsinasingleruleset.


Extending in Less


ToextendaselectorinLess,usetheLess-only:extendpseudo-class,whichdoesn’t
existinCSS.The:extendpseudo-classrequiresoneargument:theselectorofthe
rulesetyouwishtomergewiththecurrentruleset.Youmustuse:extendwithin
aruleset,anditmustbeprefixedwithaparentselectorampersand(&).Here’sa
simpleexample:


Preprocessors 345

Free download pdf