CSS Master

(Primo) #1
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

Free download pdf