E-book details

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

Ben Frain

Ebook
  • Sass and Compass for Designers
    • Table of Contents
    • Sass and Compass for Designers
    • Credits
    • Foreword
      • Youre 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
        • 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
    • 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
    • Index
  • Title: 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
  • Author: Ben Frain
  • Original title: 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.
  • ISBN: 9781849694551, 9781849694551
  • Date of issue: 2013-04-25
  • Format: Ebook
  • Item ID: e_3bew
  • Publisher: Packt Publishing