Using comments in SASS (Should know)

Phew – that last exercise was quite a task! We're going to take a breather and focus on how comments work in SASS. As I am sure you are aware, it is critical to add comments, so you know what something does when you revisit the code at a later date. You'll be pleased to know that this is a very easy exercise in relation to the last one, as comments in SASS work in a similar manner to other programming languages.

Getting ready

All you will need for this exercise is your trusty editor. For the purposes of this recipe, I will assume you are using Sublime Text 2 that we installed earlier in the book. If you don't use Sublime Text 2, then you will also need to have an instance of SASS' watch command running in the background, to compile the code.

How to do it...

1. Launch your editor, create a new SASS document, and save it as comments.scss. Then add the following example code:

   .rounded { border-radius: 5px; border: 1px solid #ccc; }
   .widget { @extend .rounded; border-color: darkred; }
   .bright-widget {@extend .widget; border-color: #cc99ff; }

2. Let's now add in some comments. Alter the previous code, so it looks like the following code snippet:

   // this is our base style, that would be used across all widgets
   .rounded {border-radius: 5px; border: 1px solid #ccc; }
   
   /* Here we're extending our style, to give our first 
    * widget a nice dark red color. */
   .widget {@extend .rounded; border-color: DarkRed; }
   
   /*! Our second widget needs a different color - this
    * time we'll go for a brownish red color. */
   .bright-widget {@extend .widget; border-color: #370000; }

   This produces the following in Sublime Text 2:

   

3. Save your work, then press Ctrl + B to compile the code. SASS will generate the following code, as shown in the following screenshot:

   

How it works...

Adding comments to SASS files is very easy, it is no different to adding comments to code, when using PHP or JavaScript for example. However, there are some features you need to be aware of:

• Have you noticed how, when the code was compiled, the comments disappeared from the base widget style? Single-line comments are always stripped out from compiled SASS code, whereas multiline comments (such as the ones at lines 5-6 and 10-11 in the previous code) are kept:

  .rounded, .widget, .bright-widget {
    border-radius: 5px;
    border: 1px solid #ccc; }
  
  /* Here we're extending our style, to give our first 
   * widget a nice dark red color. */
  .widget, .bright-widget {
    border-color: DarkRed; }
  
  /* Our second widget needs a different color - this
   * time we'll go for a brownish red color. */
  .bright-widget { 
    border-color: #370000; }

• There may be occasions where you don't want to put in multiline comments - if you add an exclamation mark (as shown in line 14 of the SCSS file), the comment will be interpolated, and SASS will render this in the CSS output, even in compressed output modes as you will see in the Controlling output in SASS (Must know) recipe, later in this book. You don't need to use the exclamation mark option when using multiline comments, although if used, it won't affect the output.

Now that we've seen how comments work, it's time to turn our attention to something more in-depth. Let's take a look at how you can use functions and operators within SASS, starting with a look at SASS Script.