body {
background: #FFFDFB;
color: #222;
font: 100 16px / 1.5 sans-serif;
}
@import "errors";
Noticethat@import "errors";comesattheendofourCSSfile.Withstandard
CSS,@importstatementsmustbelistedatthebeginningofthestylesheet.With
preprocessors,itcanappearatanyposition.
Wecanalsoomitthefileextensionwhenweimportafilethisway.Includingit
won’tcauseproblems,butit’sunnecessary.
Let’scompileourLessfilestoCSS.Runninglessc styles.less > styles.css
createsthisoutput:
body {
font: 100 24px / 1.5 sans-serif;
}
.error {
border: 1px solid #000;
border-radius: 3px;
font-size: .9rem;
padding: 10px;
margin: 10px 0;
}
.critical {
background: #ffe8e8;
border-color: red;
color: red;
}
.warning {
background: #ffffcc;
color: #ff9900;
border-color: #ff9900;
}
Sassworkssimilarly,butinthecaseofSasspartials,filenames:
■ shouldbeginwithanunderscorecharacter
■ mustusean.scssextensioninsteadofa.lessextension.
338 CSS Master