Book Image

Instant SASS CSS How-to

By : Alex Libby
1 (1)
Book Image

Instant SASS CSS How-to

1 (1)
By: Alex Libby

Overview of this book

CSS styling has been a key part of developing for the Internet since the early 1990s, but unlike JavaScript, has suffered from the inability to produce dynamic styles, using functions, operators, and variables. SASS uses the power of Ruby to bring support for all three and more to your CSS, allowing you to engage in a more efficient, modular style of working, and making it easier to maintain your CSS styling in your projects.Instant SASS CSS How-to is a practical, hands-on guide that provides you with a number of clear step-by-step exercises, which will help you take advantage of the power of SASS, and give you a good grounding in writing and compiling CSS style sheets using the SASS pre-processor language.This book looks at how you can incorporate SASS into your web pages, and either produce style sheets dynamically, or pre-compile them before including the final article into your site's pages.You will also learn how you can use the power of mixins, functions, and variables to help produce style sheets, and reduce the amount of code you need to write in your style sheets. We will also take a look at how you can incorporate a more modular style to your development workflow, which will help with making style sheets more manageable and easier to update in the future. We will also take a look at how you can build up libraries of reusable code that you can incorporate into your future projects.You will learn everything you need to know to start using SASS to help produce more efficient style sheets in your site's pages, and adopt a more modular development workflow, which will make it easier to maintain your sites in the future.
Table of Contents (7 chapters)

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.