Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Using Comments in Sass
Arbaoui Mehdi
Arbaoui Mehdi

Posted on

     

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 defineReset.

/* Reset */
Enter fullscreen modeExit fullscreen mode

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

/*Reset*/
Enter fullscreen modeExit fullscreen mode

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**/
Enter fullscreen modeExit fullscreen mode

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 codeborder-radius, we want to tell ourselves and for anyone who open this file in the futuredon't use percentage.

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

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
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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 theAuthor of the code, and theEmail.

/*** Author: Arbaoui Mehdi* Email: arbaoui.mehdi@gmail.com**/
Enter fullscreen modeExit fullscreen mode

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: arbaoui.mehdi@gmail.com**/
Enter fullscreen modeExit fullscreen mode

Interpolation in Multiline Comments

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

$author-name:"Arbaoui Mehdi";
Enter fullscreen modeExit fullscreen mode

To get to the value of the variable$author-name within this comment, we will replace this valueArbaoui 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: arbaoui.mehdi@gmail.com**/
Enter fullscreen modeExit fullscreen mode

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/

Top comments(1)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
leninzapata profile image
Lenin Zapata
  • Joined

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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

JavaScript Coder, CSS Lover, Online Instructor 📚
  • Location
    Casablanca, Morocco
  • Work
    Frontend engineer and Online Instructor
  • Joined

More fromArbaoui Mehdi

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp