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

Kup polskie wydanie:

Spis treści książki

• 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

pokaż cały spis treści

ukryj recenzje