ingtotalpageloadtime.Moregenerally,thegreateramountofHTTPrequestsyou
have,themoretimeittakesapagetodownloadallofyourassets.^10
Forthisreason,thecurrentbestpracticeistoavoidusing@importinCSSfiles;
however,inLessandSass,@importisafantasticwaytoorganizeandmanageyour
CSS.
LessandSasssupportwhatareknownaspartialsorpartialsourcefiles.Thesefiles
aresmallerchunksofCSS,oftenorganizedbyfunctionality.Youmight,forexample,
haveseparatepartialsforforms,tables,andtypographystyles.
WecanincludethecontentsofapartialinourCSSoutputusingthe@importcom-
mand.ThiswaywecansplitourCSSacrossmultiplefilesfordevelopment,but
stillgenerateasinglefileforproduction.
Let’slookatasupersimpleexampleusingLess.We’llcreateafilenamederrors.less
thatcontainsstylesforerrorandwarningmessages:
.error {
border-radius: 3px;
border: 1px solid #000;
font-size: .9rem;
margin: 10px 0;
padding: 10px;
}.critical {
background: rgb(255,232,232);
border-color: red;
color: red;
}.warning {
background: rgb(255,255,204);
border-color: rgb(255,153,0);
color: rgb(255,153,0);
}Nowinourmain.less file―we’ll name it styles.less―we can import the styles of
errors.less:
(^10) ThisisnotaccurateforsitesservedoverSPDYorHTTP/2.
Preprocessors 337