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)

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.