Sass and Compass for Designers

If you know HTML and CSS, then you can have all the power of Sass and Compass at your disposal. This step-by-step guide will take you through the time-saving features that makes it so much easier to create cross-browser CSS.

Sass and Compass for Designers

Progressing
Ben Frain

If you know HTML and CSS, then you can have all the power of Sass and Compass at your disposal. This step-by-step guide will take you through the time-saving features that makes it so much easier to create cross-browser CSS.
$10.00
$44.99
RRP $26.99
RRP $44.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

+ Collection
Free Sample

Book Details

ISBN 139781849694544
Paperback274 pages

About This Book

  • Simple, clear, and thorough. This book ensures you don’t need to be a programming mastermind to wield the power of Sass and Compass!
  • Previously tricky and time-consuming CSS tasks will become trivial. Easily produce cross-browser CSS3 gradients, shadows, and transformations along with image sprites, data URIs, and more.
  • Follow along with installing, setting up, and working through an entire project, implementing the Sass and Compass techniques and tools as we go.

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.

Table of Contents

Chapter 1: Getting Started with Sass and Compass
Why do we need CSS preprocessors?
Why you should use Sass and Compass
What is Sass?
What is Compass?
Install Sass and Compass
Installing and working with Sass and Compass on the command line
Graphical tools for working with Sass and Compass
How to work with Sass files in text editors
Summary
Chapter 2: Setting Up a Sass and Compass project
Setting up a Sass and Compass project
Understanding the config.rb file
Creating and using partial files
Sass comment formats
A basic index.html file
A base for future projects
Summary
Chapter 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
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
A cautionary note about generated CSS
Summary
Chapter 4: Manipulate Color with Ease
Only define a color once
The lighten and darken functions
Markup amendments and diversions
Back to colors
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
Chapter 5: Responsive and Flexible Grids with Sass and Compass
Arguments against grids
Reasons to use a grid system
What is Susy?
Installing the Susy Compass plugin
Including Susy in a project
Setting up a Susy grid
Defining a context for the grid
Making a ‘mobile first’ responsive grid
Making breakpoints with Susy
Creating an entirely fluid grid
Creating a static ‘fixed’ grid
Using Susy grid helpers
Pre, Post, Squish, Push, and Pull
Grids within grids
Sub-pixel rounding issues
Summary
Chapter 6: Advanced Media Queries with Sass and Mixins
Media queries in Sass
Inline media queries with Sass
Creating a mixin to easily handle media queries
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
Chapter 7: Easy CSS3, Image Sprites, and More with Compass
Easy CSS3 with Compass's mixins
The border-radius syntax
Multiple columns
Background gradients
Adding background images with the Compass image-url helper
Image width and height helpers
Compass image sprites
Compass's text replacement mixins
Creating data URIs from images
Easy fallbacks for non-SVG capable devices
CSS transforms
CSS Filters
Transitions
Summary
Chapter 8: Programmatic Logic with Sass
Math calculations with Sass
Control directives and how to use them
Stripping and adding units to values
Writing functions in Sass
Using the @debug directive
The @warn directive
Summary
Chapter 9: Becoming a Sass and Compass Power User
Turning off Compass support for specific vendors
Adding experimental support for bleeding edge CSS features
Defining experimental values
The Sass interactive shell
Adding the Sass globbing plugin to import batches of partial files
Creating multiple separate style sheets
Converting partial files to standalone style sheets
Compass statistics
Clearing the Sass cache
One-off Compass compiles
Mission debrief
Avoid conjecture with tools and testing
Parting shots
Summary

What You Will Learn

  • Install Sass and Compass on your system and then set up and maintain Sass and Compass powered projects!
  • Learn how to easily manipulate colors; tinting, shading, mixing, and complementing existing colors in your stylesheets becomes a cinch.
  • Make your own responsive CSS-based layout grid that scales across any viewport with no extra markup needed.
  • Create media query-based CSS rules alongside existing styles, making responsive website building simpler.
  • Explore Compass’s many helpers and tools. You’ll learn to embed images and fonts and produce advanced cross-browser CSS3.
  • Create perfect image sprites with Compass in moments.
  • Learn how to create loops with Sass to automate repetitive CSS tasks.
  • Understand how to compartmentalize code, making your CSS more maintainable, understandable, and modular than ever before.

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.

Authors

Table of Contents

Chapter 1: Getting Started with Sass and Compass
Why do we need CSS preprocessors?
Why you should use Sass and Compass
What is Sass?
What is Compass?
Install Sass and Compass
Installing and working with Sass and Compass on the command line
Graphical tools for working with Sass and Compass
How to work with Sass files in text editors
Summary
Chapter 2: Setting Up a Sass and Compass project
Setting up a Sass and Compass project
Understanding the config.rb file
Creating and using partial files
Sass comment formats
A basic index.html file
A base for future projects
Summary
Chapter 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
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
A cautionary note about generated CSS
Summary
Chapter 4: Manipulate Color with Ease
Only define a color once
The lighten and darken functions
Markup amendments and diversions
Back to colors
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
Chapter 5: Responsive and Flexible Grids with Sass and Compass
Arguments against grids
Reasons to use a grid system
What is Susy?
Installing the Susy Compass plugin
Including Susy in a project
Setting up a Susy grid
Defining a context for the grid
Making a ‘mobile first’ responsive grid
Making breakpoints with Susy
Creating an entirely fluid grid
Creating a static ‘fixed’ grid
Using Susy grid helpers
Pre, Post, Squish, Push, and Pull
Grids within grids
Sub-pixel rounding issues
Summary
Chapter 6: Advanced Media Queries with Sass and Mixins
Media queries in Sass
Inline media queries with Sass
Creating a mixin to easily handle media queries
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
Chapter 7: Easy CSS3, Image Sprites, and More with Compass
Easy CSS3 with Compass's mixins
The border-radius syntax
Multiple columns
Background gradients
Adding background images with the Compass image-url helper
Image width and height helpers
Compass image sprites
Compass's text replacement mixins
Creating data URIs from images
Easy fallbacks for non-SVG capable devices
CSS transforms
CSS Filters
Transitions
Summary
Chapter 8: Programmatic Logic with Sass
Math calculations with Sass
Control directives and how to use them
Stripping and adding units to values
Writing functions in Sass
Using the @debug directive
The @warn directive
Summary
Chapter 9: Becoming a Sass and Compass Power User
Turning off Compass support for specific vendors
Adding experimental support for bleeding edge CSS features
Defining experimental values
The Sass interactive shell
Adding the Sass globbing plugin to import batches of partial files
Creating multiple separate style sheets
Converting partial files to standalone style sheets
Compass statistics
Clearing the Sass cache
One-off Compass compiles
Mission debrief
Avoid conjecture with tools and testing
Parting shots
Summary

Book Details

ISBN 139781849694544
Paperback274 pages
Read More