Chapter 1, Requirements, covers the software and libraries which will be used throughout this book. Here, we'll discuss more than what you'll need installed, we'll also look at some required knowledge too, such as the commonly used command line/terminal commands and some HTML and CSS examples.

Chapter 2, Sass – The Road to Better CSS, will cover setting up a Sass project and taking control of the CSS output. We'll also be writing mixins and functions to create some baseline typography styles. We'll then look at using the !default flag, lists, nesting, loops, and error handling and debugging to create more robust, usable code.

Chapter 3, Compass – Navigating with Compass, will look at creating a project using Compass. We'll look at how to take control of the default options through the command line, including what directories Compass creates by default, and where. We'll look at the many functions and mixins Compass has.

Chapter 4, CSS and HTML – SMACSS, OOCSS and Semantics, will talk about some CSS and HTML concepts which are vital to a good Sass workflow, such as OOCSS, SMACSS, BEM, and Atomic Design, and also why you should convert to using HSL instead of RGB or HEX color codes.

Chapter 5, Advanced Sass, will look at some of the more advanced features of Sass. We'll dive into the nuances of variable scope, using extends and mixins for better code resuse, the @content directive and maps.

Chapter 6, Gulp – Automating Tasks for a Faster Workflow, will start working on our final project. We'll look at installing and configuring Gulp, and installing various plugins and setting up tasks to automatically watch our project for changes and compile Sass and sourcemaps, and then reload the browser. All in one keystroke!

Chapter 7, Sourcemaps – Editing and Saving in the Browser, what source maps are and why you should care. We'll look at setting up sourcemaps to work in Firefox and Chrome with a few short examples of how this can be really useful when designing in the browser.

Chapter 8, Building a Content-Rich Website Components, will continue with our final project. We'll use many of the functions and mixins we wrote before to create reusable, configurable components as the core of our design. 

Chapter 9, Building a Content-Rich Website – Layout, will install and set up Susy through bower. Once that is done we'll create a complete mobile-first grid system using breakpoints and the built in Susy mixins. 

Chapter 10, Building a Content-Rich Website – Theme, we'll conclude our design, by giving it some color and style. We'll work out what fonts to use to best match the brand indentity of the project, and we'll add some eye catching elements such as dropcaps, tag clouds and stylish title underlines.

To follow along with the examples in this book you will need Ruby version 2.1.7 or greater. You will then need the latest Compass and Sass gems. The Compass gem will install Sass also. You will also need NodeJS and npm. Npm will come built in with NodeJS. Any version after 4.2.1 will do. Finally, you will need Bower which can be installed through npm.

Not to worry…in Chapter 1, Requirements,  we will cover installing Ruby, Compass, Sass, and NodeJS.

This book is aimed at those who know CSS3 and HTML5 quite well and who've built a few small-to-medium-sized websites from scratch using Sass and Compass.

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We can include other Sass files through the use of the @import directive."

A block of code is set as follows:

@import '../../bower_components/susy/sass/susy';

$susy: (
    columns: 12,
)

$breakpoints: (
    sm: 480px,
    md: 768px,
    lg: 980px
);

@each $size, $value in $breakpoints {
    @media (min-width: map-get($breakpoints, $size) {
        @for $i from 1 through map-get($susy, columns) {
            .col-#{$i}-#{$size} {
                @include span($i);

                &-last {
                    @include span($i last);
                }
            }
        }
    }
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

[@import '../../bower_components/susy/sass/susy';

$susy: (
    columns: 12,
)
$breakpoints: (
    sm: 480px,
    md: 768px,
    lg: 980px
);

@each $size, $value in $breakpoints {
    @media (min-width: map-get($breakpoints, $size) {
        @for $i from 1 through map-get($susy, columns) {
            .col-#{$i}-#{$size} {
                @include span($i);

                &-last {
                    @include span($i last);
                }
            }
        }
    }
}

Any command-line input or output is written as follows:

$ sass -–update assets/sass/main.sass:assets/css/main.css -–style=expanded

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Clicking the Next button moves you to the next screen."

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.