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)

Pre-compiling SASS (Must know)


If you are a web designer, the thought of using the command line may put you off of using SASS; you probably prefer using a tool that has a GUI that can do some or all of the hard work for you. If this is true, then you can use the power of Scout to do the hard work of compiling for you, as you will see in this recipe.

Getting ready

For this recipe, you will need to obtain a copy of Scout. It is available from http://mhs.github.com/scout-app/. The latest version at the time of writing is 0.7.1; this is a cross-platform application that will require you to download Adobe AIR. I will assume for the purposes of this exercise that you don't have it installed; you can download it from http://get.adobe.com/air/.

How to do it...

  1. Double click on the AdobeAIRInstaller.exe file to install. Click on I Agree to accept the license conditions and then click on Finish when prompted.

  2. When AIR has been installed, run the ScoutAppInstaller-0.7.1.exe file to begin installing Scout. You may find you need to run this as administrator in order to install.

  3. You will see the following screenshot. Click on Continue to accept defaults and install:

  4. Scout is now installed; it will display an initial window, ready to be configured. Click on + at the bottom-left of the window then select the c:\sass folder we created earlier. We now need to add in some additional settings, as shown in the following screenshot, the rest can be left as default:

  5. Once the additional settings have been entered, these will automatically be saved by Scout. You can then click on the blue and black play button to start the SASS compiler. Any changes you then make to your .scss files will be picked up by Scout, which will then update the appropriate CSS file automatically:

Note

You may have noticed the warning in the previous screenshot; this is not something to be alarmed about. There is a pending change due in the software from using FSSM to Guard – this is to remove duplication, although there is still some uncertainty about if or when this change may take place.

How it works...

Scout performs much the same process that we looked at earlier in this book; it watches out for any SASS files that it has been made aware of, and will compile them into valid CSS files when a change has been made. The key difference is that while you may have to manually set up a number of different sessions in a command prompt, to watch multiple files, or a single session to watch multiple files, Scout allows you to do this from within one screen. It has the options to add details for watching multiple files or folders, which you can then turn off or on as desired.

There's more...

If you are a Mac or Windows user, and prefer not to use Adobe AIR, then there is an alternative that you can use – LiveReload. It is available at http://livereload.com/. This is primarily a Mac application, although a version is available for Windows XP with Service Pack 3 or above. Note though that the latter is an alpha version, so please try it at your own risk; it may not suit everyone!

Now that we have the ability to compile our files, there is one last part we need to look at before we can start writing code – it will be useful to know from within a browser session, which SASS line is being referenced for a particular style. No problem, we can do that using FireSASS, as you will see in our next recipe.