Using Comments in Sass

Video

Source Code used in the video

https://github.com/freemh/dont-repeat-your-css/tree/master/1-sass-fundamentals/4-comments

Lesson Script

Introduction

If we take a look at this code right here, we see that it’s telling nothing, we know from the result on the browser that this is the alert and buttons styles, but we’re not obligated reading the code to deduce where it’s used.

Maybe the code sound familiar to you, because you’re the one who writes it, but once you’re away from it for a longer period, you’ll forget what this code is doing exactly, and imagine the hustle of having plenty of these stylesheets with no comments.

Same goes here if you’re in a team, and everyone has to know what this part of the code is doing, or what this stylesheet is about. And to assure transparency for both ourselves and other developers we’ve to use Comments, that will assist in generating a well-formatted CSS and makes stylesheets easy to navigate through.

Alright, How to add comments using Sass?

Sass has two types of comment, multi-line comments, and Single-line comments.

Multiline Comments

Let’s start with the multi-line comments, each part of this code is for a specific use case. We use these symbols /* to start a multiline-comment, and the comment will end after closing the */ symbols, now we can write our comment in multiple lines, this code here is used as a reset style, so we’ll define Reset.

/* Reset */

If we want to use this comment as a multiline-comment.

/*

Reset

*/

And if we take look at the generated CSS, we’ll see that the comment is generated with multiple lines, personally, I prefer using asterisks to give a better look at the comment.

/*
*
* Buttons
*
*/

Single-line Comments

We've also single-line comment, and to create a single-line comment we use double slashes // at the beginning of the comment, as an example at this location of the code border-radius, we want to tell ourselves and for anyone who open this file in the future don't use percentage.

.item {
  border-radius: 5px; // don't use percentage
}

These single-line comments will not be presented in the compiled CSS like the multiline-comments, and they span on one line, not multiple lines.

But you should know, that this generated CSS here is not minified or compressed, because we're not telling the Sass preprocessor to do so by using this command.

sass main.scss:main.css --watch

Keep Comments in Generated CSS files

What if we want to use this file in production, which means that we’ve to minify the “main.css” to decrease the file size for better performance.

So, in this case, we will use the option --style compressed from the Sass CLI, to compress the generated CSS.

sass main.scss:main.css --watch --style compressed

And if we hit save again from the Sass file, we'll see that the code is compressed, now all the comments don't exist neither Multi-Line or Single-Line comments, Single-Line comments in both cases are not generated on the CSS file, because they are specific to Sass, but, what if we want to have some multi-lines comments appears and not be removed, like this one, that includes the Author of the code, and the Email.

/*
*
* Author: Arbaoui Mehdi
* Email: [e-mail]
*
*/

When we hit save again, this comment doesn’t appear in the CSS file, however, we can force Sass to keep multiline comments in the final output by using this ! exclamation mark.

/*!
*
* Author: Arbaoui Mehdi
* Email: [e-mail]
*
*/

Interpolation in Multiline Comments

From the Sass file, we can even use interpolation within multiline-comments, which means that we can insert variable values inside a multiline-comment, let's create a new variable author-name that holds a string my name Arbaoui Mehdi as an example.

$author-name: "Arbaoui Mehdi";

To get to the value of the variable $author-name within this comment, we will replace this value Arbaoui Mehdi from the comment with the variable, to do so we use this syntax #{}, then inside of the curly braces we put the variable name $author-name.

/*!
*
* Author: #{$author-name}
* Email: [e-mail]
*
*/

Wants More

To access the full course on How to Stop repeating your CSS by following the Sass DRY principle:

https://www.udemy.com/course/learn-sass-and-dont-repeat-your-css/

Comments

[Lenin Zapata]

Hi, by putting /*! and printing it in the .css.
How could I make it not appear?