You are previewing Pragmatic Guide to Sass.
O'Reilly logo
Pragmatic Guide to Sass

Book Description

CSS is fundamental to the web, but it's a basic language and lacks many features. Sass is just like CSS, but with a whole lot of extra power so you can get more done, more quickly. Build better web pages today with Pragmatic Guide to Sass. These concise, easy-to-digest tips and techniques are the shortcuts experienced CSS developers need to start developing in Sass today.

Table of Contents

  1. Pragmatic Guide to Sass
    1. Copyright
    2. For the Best Reading Experience...
    3. Table of Contents
    4. What Readers Are Saying About Pragmatic Guide to Sass
    5. Acknowledgments
    6. Welcome!
      1. Who Is This Book For?
      2. Nomenclature and Syntax
      3. Overview
      4. How to Read This Book
      5. Getting Help
      6. A Few Final Comments
    7. Part 1: Basics
      1. Installing Sass
      2. Compiling Sass into CSS
      3. Using Sass with Rails
      4. Avoiding the Command Line: Using Scout
      5. Commenting
      6. Selector Scoping
      7. Going Further with Advanced Scoping
      8. Altering the CSS Output
      9. Defining Variables
      10. Calculating a Layout
      11. Creating Themes with Advanced Colors
      12. Importing
      13. Building a Font Family Library
      14. Resetting CSS
    8. Part 2: Advanced
      1. Keeping It Semantic: @extend
      2. Keeping Code Clean with Mixins
      3. Taking Mixins Further with Variables
      4. Debugging
      5. Generating Cross-Browser Rounded Borders
      6. Using Cross-Browser Opacity
      7. Interpolating
      8. Stop Repeating Yourself with @each
      9. Determining Conditions with @if
      10. Changing Looks with Nested @media
    9. Part 3: Compass
      1. Setting Up for a Compass Project
      2. Resetting: Much Easier with Compass
      3. Sprucing Up Your Lists
      4. Making Lists Horizontal
      5. Sticking a Footer to a Window
      6. Stopping Overflow with Clearfix
      7. Truncating Text Using Ellipses
      8. Stretching Elements
      9. Jazzing Up Layouts with Columns
      10. Spriting
    10. Part 4: Blueprint CSS
      1. Producing More Two-Column Layouts
      2. Using Predefined Fancy Fonts
      3. Making Beautiful Buttons
    11. Appendix 1: SassScript Function Reference
      1. rgb($red, $green, $blue)
      2. hsl($hue, $saturation, $lightness)
      3. hsla($hue, $saturation, $lightness, $alpha)
      4. red($color)
      5. green($color)
      6. blue($color)
      7. hue($color)
      8. saturation($color)
      9. lightness($color)
      10. alpha($*args)
      11. opacity($color)
      12. opacify($color, $amount)
      13. fade-in()
      14. transparentize($color, $amount)
      15. fade-out()
      16. lighten($color, $amount)
      17. darken($color, $amount)
      18. saturate($color, $amount)
      19. desaturate($color, $amount)
      20. adjust-hue($color, $degrees)
      21. adjust-color($color, $kwargs)
      22. scale-color($color, $kwargs)
      23. change-color($color, $kwargs)
      24. mix($color1, $color2, $weight = 50 )
      25. grayscale($color)
      26. complement($color)
      27. invert($color)
      28. unquote($string)
      29. quote($string)
      30. type-of($value)
      31. unit($number)
      32. unitless($number)
      33. comparable($number_1, $number_2)
      34. percentage($value)
      35. round($value)
      36. ceil($value)
      37. floor($value)
      38. abs($value)
      39. length($list)
      40. nth($list, $n)
      41. join($list1, $list2, $separator = "auto" )
      42. append($list, $val, $separator = "auto" )
      43. zip($*lists)
      44. index($list, $value)
      45. if($condition, $if_true, $if_false)
      46. numeric-transformation($value)
    12. Appendix 2: Introduction to Haml
      1. Haml Walkthrough: ERB
      2. Haml Walkthrough: HTML