Sass and Compass for Designers

Sass and Compass for Designers
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • 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.

Book Details

Language : English
Paperback : 274 pages [ 235mm x 191mm ]
Release Date : April 2013
ISBN : 1849694540
ISBN 13 : 9781849694544
Author(s) : Ben Frain
Topics and Technologies : All Books, Web Development, Web Development

Table of Contents

Chapter 1: Getting Started with Sass and Compass
Chapter 2: Setting Up a Sass and Compass project
Chapter 3: Nesting, Extend, Placeholders, and Mixins
Chapter 4: Manipulate Color with Ease
Chapter 5: Responsive and Flexible Grids with Sass and Compass
Chapter 6: Advanced Media Queries with Sass and Mixins
Chapter 7: Easy CSS3, Image Sprites, and More with Compass
Chapter 8: Programmatic Logic with Sass
Chapter 9: Becoming a Sass and Compass Power User
  • Chapter 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 the 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
    • Chapter 2: Setting Up a Sass and Compass project
      • Setting up a Sass and Compass project
        • Creating Compass projects
          • Creating a customized Compass project
          • Creating a bare Compass project
      • Understanding the config.rb file
        • Adding the 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
      • Chapter 3: Nesting, Extend, Placeholders, and Mixins
        • Styling a site with Sass and Compass
        • Separating the 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
        • Using 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
        • Chapter 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
          • Chapter 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
            • Chapter 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
              • Chapter 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
                • Chapter 8: Programmatic Logic with Sass
                  • Math calculations with Sass
                    • Addition
                    • Subtraction
                    • Multiplication
                    • Division
                    • Calculations using variables
                  • Control directives and how to use them
                    • The @if and @else if control directives
                    • @for loops
                    • Understanding the counter variable
                    • 'From to' and 'from through'
                      • Understanding interpolation
                    • @each loops
                  • Stripping and adding units to values
                    • Stripping the unit from a value
                    • Adding a unit to a variable value
                  • Writing functions in Sass
                    • Equality operators
                    • Relational operators
                    • @return
                    • Using the result of a function
                  • Using the @debug directive
                  • The @warn directive
                  • Summary
                  • Chapter 9: Becoming a Sass and Compass Power User
                    • Turning off Compass support for specific vendors
                      • Configuration support variables
                      • Opera is now WebKit based
                    • Adding experimental support for bleeding edge CSS features
                    • Defining experimental values
                    • The Sass interactive shell
                      • Compass interactive
                    • 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
                      • Fixing human errors
                      • Catching common problems with a lint tool
                    • Avoid conjecture with tools and testing
                      • All hail the Chrome Developer Tools
                        • Continuous page repainting
                      • Finding unused styles
                    • Parting shots
                    • Summary

                    Ben Frain

                    Ben Frain has been a frontend web designer and developer since 1996. He also works as a technology journalist, contributing regularly to a number of diverse publications on the Mac platform, consumer technology, website design, and the aviation industry.

                    Before that, he worked as an underrated (and modest) TV actor, having graduated from Salford University with a degree in Media and Performance. He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work he enjoys simple pleasures; playing indoor football whilst his body (and wife) still allows it, and wrestling with his son.

                    Visit him online at and follow him on Twitter at

                    Sorry, we don't have any reviews for this title yet.

                    Code Downloads

                    Download the code and support files for this book.

                    Submit Errata

                    Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                    - 2 submitted: last submission 04 Dec 2013

                    Errata type: Code | Page number: 68 | Errata date: 21 May 2013

                    The file reference "_body.scss" is incorrect, the correct file reference is "_base.scss".


                    ErrataType: Code | Page no: 68,69

                    It is : font-size: 1.05em;

                    It should be: font-size: .95em;

                    Sample chapters

                    You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                    Frequently bought together

                    Sass and Compass for Designers +    Haskell Data Analysis Cookbook =
                    50% Off
                    the second eBook
                    Price for both: €31.75

                    Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                    What you will learn from this book

                    • 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.


                    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.

                    Code Download and Errata
                    Packt Anytime, Anywhere
                    Register Books
                    Print Upgrades
                    eBook Downloads
                    Video Support
                    Contact Us
                    Awards Voting Nominations Previous Winners
                    Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                    Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software