Standard CSS employs just one form of comment. Borrowing a syntax from JavaScript, Sass introduces one more, creating a very powerful and useful variant.

As you know, standard CSS uses the multiline /* … */ format. CSS declarations inside a comment syntax will be ignored by the browser:

body {
  /* border: 2px solid; -- this CSS will be ignored */
  background: red; 
}

More commonly, this form of CSS comment is used to leave notes during development:

html { 
	box-sizing: border-box;
} 
*, *:before, *:after {
	box-sizing: inherit;
}
.box-reset {   
	/* resets an element to use standard box-sizing */   
	box-sizing: content-box; 
}

You’ll usually want the second kind of informational comment to remain in your stylesheet, but not the first kind. Sass allows for this distinction by using a // single line comment syntax:

html {
	box-sizing: border-box;
} 
html *, html *:before, html *:after { 
	box-sizing: inherit;
}
.box-reset {   
	/* this comment will be retained in the Sass-generated stylesheet */   
	box-sizing: content-box; 
}
body {
	//  border: 2px solid; -- this line will be removed from the stylesheet
background: red; 
}

This makes it easy distinguish between testing CSS, which may be added, removed and re-added at any time, and development commentary. Multiline comments will remain in your final stylesheet, but // single-line comments will be left out; of course, all of the original content and formatting will remain in your .scss file. You’ll see this same behaviour in work exported from CodePen.

Finishing Steps

The final stylesheet for your site should be as small as possible, in order to load as quickly as possible; this means removing all comments, together with carriage returns, unnecessary spaces and semicolons. Doing so will reduce CSS that looks like this:

// general resets
html {
	box-sizing: border-box;
}
html * {
	box-sizing: inherit;
}
figure {
	margin: 0;
	text-align:center;
}

To this:

html{box-sizing:border-box}html *{box-sizing:inherit}figure{margin:0;text-align:center}

Unfortunately, CodePen doesn’t yet have this feature built into its export function. But if you’re running it from the command line, Sass has an option to do so: sass --watch a.scss:a.css --style compressed

Alternatively, in Codekit, my build manager of choice:

Before finishing up this introductory series on Sass there’s one more feature that should not go unnoticed: the power of CSS preprocessor @import functions, which I’ll turn to next.

Photograph by Alain S, used under a Ceative Commons license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.