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)

Building a slider using Compass (Become an expert)

If you browse through the Internet regularly, it is very likely that you will have come across many sites that use a content slider in some form or other. In this recipe we're going to take a look at how you can use Compass to style such a slider.

Getting ready

For this recipe, you will need a copy of the downloaded code for this book, which is available at the Packt website. However, space constraints mean we're not going to be able to reproduce it here in full, so you will need to refer to a copy from the code download. You will also need a copy of the open-source FlexSlider library which you can download from You will also need your choice of text editor, as well as the Scout application running. I'm going to assume you will be using Sublime Text 2 for the purposes of this recipe.

How to do it...

  1. Let's make a start by setting up a folder for our work. For the purposes of this recipe, I will assume you've called it slider, and that it is stored at the root of C:.

  2. Next, let's go ahead and create a Compass project. Bring up a command prompt and enter the following command from root of C::

    compass create slider --bare --sass-dir "sass" --css-dir "css" --javascripts-dir "javascripts" --images-dir "images"
  3. This will create the base project, and so we now need to copy some files into this folder. Go ahead and open up the ZIP archive you downloaded from for this project, and extract the following files:

    • From the \images folder, copy this bg_direction_nav.png to c:\slider\images

    • From the \demo\images folder, copy the four kitchen_* images to c:\slider\images

    • From the \demo\js folder, copy jquery.mousewheel.js, and modernizr.js to c:\slider\js

    • From the root of the archive, copy jquery.flexslider.js to c:\slider\js

  4. From the code download available for this book, copy the following:

    • Copy Flexslider.scss, style.scss, and fsbase.scss to c:\slider\scss

    • Copy index.html to c:\slider

  5. We now need to get Scout running. Open up Scout, and let's add in the watch for our slider folder using the following details:

    • Input Folder: c:\slider\sass

    • Output Folder: c:\slider\css

    • JavaScripts Folder: c:\slider\js

    • Images Folder: c:\slider\images

    • Config File: c:\slider\config.rb

    • Environment: set this to Production

  6. When Scout is configured, click on the Play button to start the watch process. It should automatically create new CSS files in the c:\slider\css folder. A quick check in the folder confirms this:

  7. Go ahead and preview your work in a browser. You should see something like the following screenshot:

How it works...

If you look back at the main index.html file, the process for building a slider is in fact very simple. We've included calls to instances of jQuery (via Google's CDN), Modernizr (for fall-back support), a MouseWheel library (for mousewheel support in the slider), and of course FlexSlider itself. It then focuses on an unordered list (lines 19 to 24), around which we've added some extra markup, similar to what you might add in a production website.

We then add in calls to the FlexSlider library towards the end, which is where the magic happens to turn our unordered list into a slider. We've then used Compass to help style the resulting output into something recognizable as a slider. A look through the CSS code should also reveal some of the Compass features that we used earlier in the book. Did you recognize the mixins in flexslider.scss, the @import statements in style.scss, as well as the nested styles in fsbase.scss?

There's more...

This recipe illustrates perfectly how SASS can play nicely with other libraries. After all, we're producing what is effectively normal CSS. If you find the CSS from some libraries such as Modernizr doesn't work so well, then all you should need to do is hive this CSS off into a separate file, if you do experience problems using it with SASS.

Now, I'm sure there will be one question you're asking: what about using SASS in something like a CMS system? Absolutely, this is where it can really help, particularly where themes (such as WordPress) can run up to a couple thousand lines! In the last two recipes of this book, we will take a look at how you can use SASS in a CMS system such as WordPress, and see how you can use SASS to cut down your development time.