Getting interactive with Script (Become an expert)

If you are using SASS, then there is a likelihood that you are familiar with using the command line, either in a Windows, Apple, or UNIX based environment. Although you can use something like Scout or Compass.app to help take some of the pain out of compiling SCSS files, it is worth trying out the command line – there is a hidden gem available in the form of interactive SASS. Let's take a look at how this works, as part of this next exercise.

Getting ready

All you will need for this exercise is a terminal or command prompt, depending on which environment you use.

How to do it...

1. Let's make a start by calling up a command prompt or terminal window, entering sass –i at the command prompt, and then pressing Enter:

   

2. You will see from the previous screenshot that I've already entered in a command. Go ahead and try it out; a quick look at ColorHexa (http://www.colorhexa.com) shows #5e0000 to be a brownish-red color. Adding it to #444 (a dark gray) gives a nice shade of brown, in the form of #a24444.

3. Now try entering in margin-left: 5px + 8px/2px…oops! It's come back with an error. I am guessing that you may have been expecting 9px as the answer. (If you were expecting 6.5px, then sorry, that's not correct either!)

4. Okay, now try entering lighten(#99ccff, 20%), you should get back #3399ff; a check on ColorHexa shows a nice shade of light-blue, which is expected.

5. To finish, let's now enter in adjust-color(blue, $lightness: -20%, $hue: 20deg) – this renders #330099 as the result, which is a solid shade of purple.

6. At this point, press Ctrl + D to exit out of the session and then close the window.

How it works...

Right – you're probably thinking "How I can use this in my work…?"

It's a good question – let me explain. Interactive SASS is not meant to be an all-singing, all-dancing part of the library. Think of it as a way of validating your calculations, particularly when working with colors and/or numbers (such as sizes). Interactive SASS allows you to enter in any number of simple calculations, and it will render the results on screen. You won't be able to enter in large mixins, but if you need to confirm what a simple calculation would render, then this is perfect.

In particular, notice the error shown in step 3? While the calculation itself is perfectly valid, Interactive SASSScript doesn't like the margin-left: text at the start, hence the error. If you're wondering why 6.5px is wrong, it is because certain operators are prioritized before others. In this example, the division is done before addition, so 8 px divided by 2 px gives 4 px, plus 5 px gives 9 px as the answer.

Its real power comes in step 5 – the calculation is a bit of a mouthful, so having the ability of Interactive SASS available is a great help to confirm the expected result. It also means that if you wanted to reduce the complexity down to a single color value, then you can. It is entirely up to you.

Let's move on and turn our attention to a different part of the library. We'll be taking a look at using CSS-3 directives within SASS; we will come back to using functions later in the book.