Altering output style (Should know)

So far, we've looked at a number of different parts of the SASS library, to see how it can help you write more efficient CSS. There's one thing that we've not touched on though, and this is something about which I am very particular: making sure the CSS stylesheet looks presentable! Most developers should do this as a matter of course, it can become a real pain if you're managing more than 2,000 lines of CSS styling, such as in a WordPress theme. What if you could set the style automatically? You can and we'll see how in the next recipe.

Getting ready

For this recipe you will need your text editor. Here, I'm using Sublime Text 2, although you can use an alternative if you prefer. You will also need Scout up and running, which we installed earlier in this book. While you can use the command line route to control the output style, Scout makes it much easier to achieve!

How to do it...

1. Let's make a start by creating a folder in which to store our compiled CSS files. Call it example output and store it under C:\sass, for the purposes of our recipe.

2. We now need to configure Scout to scan for changes in our SCSS files. Open up Scout and change the Input and Output folders to c:\sass\example output.

3. We also need to set the output modes as well. Set the Environment option to Development and the Output Style to Compressed.

4. Now that Scout is configured, let's go ahead and start it. To do so, click on the Log button on the right-hand side of the window, and then on the Play [ ] button which changes to a Stop [ ]button:

   

5. We can now create our SCSS file. Open up Sublime Text 2 and add the following code snippet, saving it as example output - compressed.scss. The code itself won't actually do anything, but is enough to demonstrate the different output styles:

   /* Example - compressed output */
   .errorOne { font-size: 10px; font-weight: 400; }
   .errorTwo { font-size: 20px; font-weight: 200; }
   .errorTwo { @extend .errorOne; color: blue; }

6. Save the file and watch Scout to confirm it has picked up the changes and generated the CSS file accordingly. This will be in our example output folder that we created earlier:

   

7. Let's take a look at the output generated in the CSS file:

   .errorOne,.errorTwo{font-size:10px;font-weight:400}.errorTwo{font-size:20px;font-weight:200}.errorTwo{color:blue}

8. This is an example of the compressed style – let's go back to Scout and choose Expanded as a different style. Switch back to Sublime Text 2 and save a copy of the SCSS code as example output – expanded.scss. Scout should automatically compile the file, and output the following code:

   

How it works...

Notice the difference in styles between the two files? SASS makes it very easy to output your code in any one of the four different styles. You can choose from Expanded, Compressed, Compact, or Nested. All you need to do is to change the Output Style option in Scout to your preferred choice, then stop and restart Scout by clicking on the play/stop button as shown in step 4 of this recipe. Scout takes care of compiling the code in the chosen format for you.

There's more...

I mentioned earlier that we would use Scout for this recipe – with very good reason. It is possible to compile the code with the appropriate output style set, but it is more of a manual process.

If you prefer to compile via the command line, then you can use the –style switch to achieve the same result. This is how you would compile the code using the compressed format:

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

The trouble is, you will have to enter this at the start of each session, unless you add it to a batch file (or Mac equivalent), and run it. This can be a pain, particularly as the earlier command will only watch for the named file!

You can also achieve the same result using Compass (we will see more of Compass later in the book). As part of using Compass, you can add in an option to the config.rb file, similar to the following code snippet:

# You can select your preferred output style here (can be overridden via the command line):
output_style = :compressed #:expanded or :nested or :compact or :compressed

Using this option means you would use Compass' version of watch, instead of SASS'. The highlighted change would apply to all files in the same project folder, whereas the earlier SASS command only applies to the file being watched. Overall, Scout is more flexible, even if it is not the speediest!

Okay, so far we've focused our attention on functionality that is available with the core SASS library. Let's go a little further afield now, and look at how you can use pre-built external libraries such as Bourbon within your code, using a classic jQuery-based sliding panel as our example.