Sass and Compass for Designers

Ben Frain

• Publisher: Packt Publishing
• Year: 2013
• ISBN:
  9781849694544
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Programming
• Index: Computer Science

In Detail

The CSS preprocessor, Sass, is becoming the de-facto standard for producing cross-browser CSS more maintainable and with more ease. It supercharges CSS with features that make previously difficult and time-consuming tasks trivial. This book concentrates on distilling the techniques in a straightforward manner making it accessible to all, even to those that only know HTML and CSS.

Written by the author of the bestselling "Responsive Web Design with HTML5 and CSS3", Sass and Compass for Designers will explain everything you need to get Sass and Compass installed, mastered, and making your life easier. There will be no perplexing terminology or baffling syntax left unexplained. We'll get you set up and then build a site together, step by step, using the incredible power of Sass and Compass.

We will start with a completely unstyled HTML document and build a responsive Sass and Compass powered website step by step.

Sass and Compass make CSS easy. You'll learn how to manipulate color in the stylesheet with a single command, create responsive grids with ease, automatically create image sprites, and create CSS3 powered rules that work across all modern browsers.

"Sass and Compass for Designers" explains how to produce great CSS easier than ever before.

Approach

A step-by-step tutorial guide, taking you through how to build a responsive Sass and Compass powered website.

Who this book is for

If you understand HTML and CSS, this book is all you need to take your code to the next level with Sass and Compass. No prior understanding of CSS preprocessors or programming conventions is needed.

Sass and Compass for Designers

---

Table of Contents

Sass and Compass for Designers

Credits

Foreword

You're doing it wrong!

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Getting Started with Sass and Compass

Why do we need CSS preprocessors?

If it ends up producing CSS, why not just write CSS?

Why you should use Sass and Compass

Use variables (only define a value once)

Understanding the syntax of variables

Automatic RGBA color values and conversions

Forget about vendor prefixes

Nesting rules

Media queries the simple way

Automatic compression of CSS for faster websites

What is Sass?

What is Compass?

Install Sass and Compass

Install package for OS X

Installing and working with Sass and Compass on the command line

Installing Ruby on Windows

Running a gem command

Mac OS X command line install

Windows command prompt install

Check which version of Sass and Compass you have

Check which versions of Sass and Compass are available

Installing the latest version of Sass and Compass (including prerelease versions)

Create a Sass and Compass project from the command line

Automatic compile to CSS from the Command Line

Graphical tools for working with Sass and Compass

Scout app

CodeKit

LiveReload

How to work with Sass files in text editors

Summary

2. Setting Up a Sass and Compass project

Setting up a Sass and Compass project

Creating Compass projects

Create a customized Compass project

Creating a bare Compass project

Understanding the config.rb file

Adding required plugins

Setting the names and paths for project assets

Setting the CSS output style

The nested output option

The compact output option

The compressed output option

Remove the comments, keep the style

Compress the CSS, keep the comments (loud comments)

Enable relative assets

Creating and using partial files

Sass provides maintainability and production ready code

Importing a partial file

The syntax for writing variables in Sass

Sass comment formats

Standard CSS comments

Sass single line comments

A basic index.html file

A base for future projects

Summary

3. Nesting, Extend, Placeholders, and Mixins

Styling a site with Sass and Compass

Separating layout from visuals

What nesting is and how it facilitates modules of code

Nesting syntax

The parent selector

Chaining selectors

Easy Modernizr styles with the parent selector

Make a partial file for fonts

Changing the font with Modernizr and the parent selector

Dangers of excessive nesting

Are ID selectors bad?

Nesting namespaces

Using the @extend directive to extend existing rules

Use placeholder selectors to extend styles only when needed

What mixins are and how we can use them to easily produce oft-needed code

Basic mixin syntax

How to write mixins with defaults

A cautionary note about generated CSS

Summary

4. Manipulate Color with Ease

Only define a color once

The lighten and darken functions

Understanding HSL colors

Syntax for lighten and darken

Markup amendments and diversions

The Compass clearfix

Back to colors

Mixins within mixins? What is this new devilry?

The complement (and invert) functions

The invert function

The adjust-hue function

The saturate and desaturate functions

The transparentize/fade-out functions

The opacify/fade-in functions

The grayscale function

The rgba function

The mix function

The adjust-color function

The scale-color function

The shade and tint functions

Putting it all together

Summary

5. Responsive and Flexible Grids with Sass and Compass

Arguments against grids

Reasons to use a grid system

What is Susy?

What does Susy actually do?

Installing the Susy Compass plugin

Including Susy in a project

Susy project variables

Setting up a Susy grid

Defining a context for the grid

Showing the grid background

Setting Susy to border-box

Making a ‘mobile first’ responsive grid

Making breakpoints with Susy

Creating an entirely fluid grid

Creating a static ‘fixed’ grid

Using Susy grid helpers

Prefix, Suffix, and Pad

Prefix

Suffix

Pad

Pre, Post, Squish, Push, and Pull

Pre

Post

Squish

Push and Pull

Grids within grids

nth-omega mixin

Sub-pixel rounding issues

Why sub-pixel rounding errors occur

Container relative positioning

Standard Susy syntax and output

The isolate-grid mixin

Summary

6. Advanced Media Queries with Sass and Mixins

Media queries in Sass

Using a media query partial to separate media query based styles

Inline media queries with Sass

Creating a mixin to easily handle media queries

Defining breakpoints as variables

How the MQ media query mixin works

Variations on a theme

Writing inline media queries

Gzip and CSS compression = victory!

Testing the real-world difference between inline and grouped media queries

Reviewing CSS code

Summary

7. Easy CSS3, Image Sprites, and More with Compass

Easy CSS3 with Compass's mixins

The text-shadow syntax

Text shadow with default values

The border-radius syntax

Multiple columns

Column rule syntax

The Box Shadow mixin

The box-shadow syntax

Multiple box-shadows

Background gradients

Background linear-gradient syntax

Background radial-gradient syntax

Combining background images and gradients

Adding background images with the Compass image-url helper

Image width and height helpers

The Compass cache buster

Compass image sprites

Additional sprite configuration options

Add the height and width to each generated HTML selector

Extra padding around the images

Layout options

Compass's text replacement mixins

The hide-text mixin

The squish-text mixin

Replace text with image dimensions

Creating data URIs from images

The inline-image syntax

Easy fallbacks for non-SVG capable devices

CSS transforms

CSS Filters

Transitions

Summary

8. Programmatic Logic with Sass

Math calculations with Sass

Addition

Su...