Sass and Compass for Designers

Sass and Compass for Designers

by Ben Frain
Released April 2013
Publisher(s): Packt Publishing
ISBN: 9781849694544

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

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

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.

Table of contents

  1. Sass and Compass for Designers
    1. Table of Contents
    2. Sass and Compass for Designers
    3. Credits
    4. Foreword
      1. You're doing it wrong!
    5. About the Author
    6. About the Reviewers
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Getting Started with Sass and Compass
      1. Why do we need CSS preprocessors?
        1. If it ends up producing CSS, why not just write CSS?
      2. Why you should use Sass and Compass
        1. Use variables (only define a value once)
          1. Understanding the syntax of variables
        2. Automatic RGBA color values and conversions
        3. Forget about vendor prefixes
        4. Nesting rules
        5. Media queries the simple way
        6. Automatic compression of CSS for faster websites
      3. What is Sass?
      4. What is Compass?
      5. Install Sass and Compass
        1. Install package for OS X
      6. Installing and working with Sass and Compass on the command line
        1. Installing Ruby on Windows
        2. Running a gem command
        3. Mac OS X command line install
        4. Windows command prompt install
        5. Check which version of Sass and Compass you have
        6. Check which versions of Sass and Compass are available
        7. Installing the latest version of Sass and Compass (including prerelease versions)
        8. Create a Sass and Compass project from the command line
        9. Automatic compile to CSS from the Command Line
      7. Graphical tools for working with Sass and Compass
        1. Scout app
        2. CodeKit
        3. LiveReload
      8. How to work with Sass files in text editors
      9. Summary
    10. 2. Setting Up a Sass and Compass project
      1. Setting up a Sass and Compass project
        1. Creating Compass projects
          1. Create a customized Compass project
          2. Creating a bare Compass project
      2. Understanding the config.rb file
        1. Adding required plugins
        2. Setting the names and paths for project assets
        3. Setting the CSS output style
          1. The nested output option
          2. The compact output option
          3. The compressed output option
          4. Remove the comments, keep the style
          5. Compress the CSS, keep the comments (loud comments)
          6. Enable relative assets
      3. Creating and using partial files
        1. Sass provides maintainability and production ready code
        2. Importing a partial file
        3. The syntax for writing variables in Sass
      4. Sass comment formats
        1. Standard CSS comments
        2. Sass single line comments
      5. A basic index.html file
      6. A base for future projects
      7. Summary
    11. 3. Nesting, Extend, Placeholders, and Mixins
      1. Styling a site with Sass and Compass
      2. Separating layout from visuals
      3. What nesting is and how it facilitates modules of code
        1. Nesting syntax
          1. The parent selector
          2. Chaining selectors
        2. Easy Modernizr styles with the parent selector
          1. Make a partial file for fonts
          2. Changing the font with Modernizr and the parent selector
          3. Dangers of excessive nesting
          4. Are ID selectors bad?
        3. Nesting namespaces
      4. Using the @extend directive to extend existing rules
      5. Use placeholder selectors to extend styles only when needed
      6. What mixins are and how we can use them to easily produce oft-needed code
        1. Basic mixin syntax
        2. How to write mixins with defaults
      7. A cautionary note about generated CSS
      8. Summary
    12. 4. Manipulate Color with Ease
      1. Only define a color once
      2. The lighten and darken functions
        1. Understanding HSL colors
        2. Syntax for lighten and darken
      3. Markup amendments and diversions
        1. The Compass clearfix
      4. Back to colors
        1. Mixins within mixins? What is this new devilry?
      5. The complement (and invert) functions
      6. The invert function
      7. The adjust-hue function
      8. The saturate and desaturate functions
      9. The transparentize/fade-out functions
      10. The opacify/fade-in functions
      11. The grayscale function
      12. The rgba function
      13. The mix function
      14. The adjust-color function
      15. The scale-color function
      16. The shade and tint functions
      17. Putting it all together
      18. Summary
    13. 5. Responsive and Flexible Grids with Sass and Compass
      1. Arguments against grids
      2. Reasons to use a grid system
      3. What is Susy?
        1. What does Susy actually do?
      4. Installing the Susy Compass plugin
      5. Including Susy in a project
        1. Susy project variables
      6. Setting up a Susy grid
      7. Defining a context for the grid
        1. Showing the grid background
        2. Setting Susy to border-box
      8. Making a ‘mobile first’ responsive grid
      9. Making breakpoints with Susy
      10. Creating an entirely fluid grid
      11. Creating a static ‘fixed’ grid
      12. Using Susy grid helpers
        1. Prefix, Suffix, and Pad
        2. Prefix
        3. Suffix
        4. Pad
      13. Pre, Post, Squish, Push, and Pull
        1. Pre
        2. Post
        3. Squish
        4. Push and Pull
      14. Grids within grids
        1. nth-omega mixin
      15. Sub-pixel rounding issues
        1. Why sub-pixel rounding errors occur
        2. Container relative positioning
        3. Standard Susy syntax and output
          1. The isolate-grid mixin
      16. Summary
    14. 6. Advanced Media Queries with Sass and Mixins
      1. Media queries in Sass
        1. Using a media query partial to separate media query based styles
      2. Inline media queries with Sass
      3. Creating a mixin to easily handle media queries
        1. Defining breakpoints as variables
      4. How the MQ media query mixin works
      5. Variations on a theme
      6. Writing inline media queries
      7. Gzip and CSS compression = victory!
      8. Testing the real-world difference between inline and grouped media queries
      9. Reviewing CSS code
      10. Summary
    15. 7. Easy CSS3, Image Sprites, and More with Compass
      1. Easy CSS3 with Compass's mixins
        1. The text-shadow syntax
          1. Text shadow with default values
      2. The border-radius syntax
      3. Multiple columns
        1. Column rule syntax
        2. The Box Shadow mixin
        3. The box-shadow syntax
        4. Multiple box-shadows
      4. Background gradients
        1. Background linear-gradient syntax
        2. Background radial-gradient syntax
        3. Combining background images and gradients
      5. Adding background images with the Compass image-url helper
      6. Image width and height helpers
        1. The Compass cache buster
      7. Compass image sprites
        1. Additional sprite configuration options
          1. Add the height and width to each generated HTML selector
          2. Extra padding around the images
        2. Layout options
      8. Compass's text replacement mixins
        1. The hide-text mixin
        2. The squish-text mixin
        3. Replace text with image dimensions
      9. Creating data URIs from images
        1. The inline-image syntax
      10. Easy fallbacks for non-SVG capable devices
      11. CSS transforms
      12. CSS Filters
      13. Transitions
      14. Summary
    16. 8. Programmatic Logic with Sass
      1. Math calculations with Sass
        1. Addition
        2. Subtraction
        3. Multiplication
        4. Division
        5. Calculations using variables
      2. Control directives and how to use them
        1. The @if and @else if control directives
        2. @for loops
        3. Understanding the counter variable
        4. 'From to' and 'from through'
          1. Understanding interpolation
        5. @each loops
      3. Stripping and adding units to values
        1. Stripping the unit from a value
        2. Adding a unit to a variable value
      4. Writing functions in Sass
        1. Equality operators
        2. Relational operators
        3. @return
        4. Using the result of a function
      5. Using the @debug directive
      6. The @warn directive
      7. Summary
    17. 9. Becoming a Sass and Compass Power User
      1. Turning off Compass support for specific vendors
        1. Configuration support variables
        2. Opera is now WebKit based
      2. Adding experimental support for bleeding edge CSS features
      3. Defining experimental values
      4. The Sass interactive shell
        1. Compass interactive
      5. Adding the Sass globbing plugin to import batches of partial files
      6. Creating multiple separate style sheets
      7. Converting partial files to standalone style sheets
      8. Compass statistics
      9. Clearing the Sass cache
      10. One-off Compass compiles
      11. Mission debrief
        1. Fixing human errors
        2. Catching common problems with a lint tool
      12. Avoid conjecture with tools and testing
        1. All hail the Chrome Developer Tools
          1. Continuous page repainting
        2. Finding unused styles
      13. Parting shots
      14. Summary
    18. Index

Product information

  • Title: Sass and Compass for Designers
  • Author(s): Ben Frain
  • Release date: April 2013
  • Publisher(s): Packt Publishing
  • ISBN: 9781849694544