You are previewing Beginning CSS Preprocessors: With SASS, Compass.js, and Less.js.
O'Reilly logo
Beginning CSS Preprocessors: With SASS, Compass.js, and Less.js

Book Description

Learn how preprocessors can make CSS scalable and easy to maintain. You'll see how to write code in a very clean and scalable manner and use CSS preprocessor features such as variables and looping, which are missing in CSS natively. Reading Beginning CSS Preprocessors will make your life much simpler by showing you how to create reusable chunks of code. In addition to coding enhancements, you’ll also learn to automate processes such as generating image sprites and minifying code.

Beginning CSS Preprocessors is your guide for getting started with CSS preprocessors. This book shows you how to use CSS in your day-to-day work and thus be smart and efficient at writing CSS.

Table of Contents

  1. Cover
  2. Title
  3. Copyright
  4. Contents at a Glance
  5. Contents
  6. About the Author
  7. About the Technical Reviewer
  8. Acknowledgments
  9. Introduction
  10. Chapter 1 : Introduction to Preprocessors
    1. What Are Preprocessors?
    2. Why Use Preprocessors?
    3. Misconceptions About CSS Preprocessors
      1. You Need To Be a Command-Line Expert
      2. You Need To Change the Way You Write CSS
      3. Why Not Write CSS Directly?
    4. Which Are the Known Preprocessors?
      1. Sass
      2. Less
      3. Compass
    5. Features of Preprocessors
      1. Variables
      2. Nesting
      3. Import
      4. Mixins
      5. Extend/Inheritance
      6. Operators
    6. Problems with CSS Preprocessors
      1. Problems with Mixins
      2. Extending Selectors or Using Mixins Can Hamper Maintenance
    7. Summary
  11. Chapter 2 : Introduction to Sass
    1. Installing Sass
      1. Checking Other Versions of Sass
      2. An Alternative to the Command Line
      3. Compiling the sass File
      4. Avoiding the Command Line with Apps: Using Scout
      5. Automating Workflow
    2. Variables
    3. Data Types
    4. Default Values for Variables
    5. Nesting Styles in Sass
    6. Referencing a Parent Selector: &
    7. Using Combinators in Your SCSS
    8. Comments
    9. Nesting Properties
    10. Interpolation
    11. Placeholder Selectors
    12. Logical Capabilities of Sass
      1. Mathematical Operations in Sass
      2. Parentheses
      3. Calculations Using Variables
      4. Control Directives
    13. Summary
  12. Chapter 3 : Advanced Sass
    1. @import
      1. Partials
      2. Nested @import
      3. Plain CSS Imports
    2. @media
    3. @extend
      1. @extend Behind the Scenes
      2. When to Use Selector Inheritance
      3. Placeholder Selectors
      4. Do More with @extend
    4. @at-root
    5. Mixin Directives
      1. Mixins versus Classes
      2. Mixins with CSS Selectors
      3. Arguments to Mixins
      4. Using Content Blocks in Mixins
    6. Function Directives
      1. Numeric Functions
      2. Color Functions
      3. List Functions
      4. User-Defined Functions
    7. Output Style
      1. nested
      2. expanded
      3. compact
      4. compressed
    8. Building Your Own Grid System
    9. Summary
  13. Chapter 4 : Development with Less
    1. Introduction to Less
    2. Client-Side Variation of Less
    3. Server-Side Variant
      1. Compiling a Less File
    4. Language Features
      1. Variables
      2. Comments
      3. Mixins
    5. Nested Rules
    6. Import Directives
    7. Mixin Guards
    8. Referencing the Parent Selector
      1. Using & with Guards
    9. Detached Rules and Mixins
    10. Operations on Numbers and Colors
    11. Merging Properties
    12. Looping Mixins
    13. Functions
      1. List Functions
      2. Color Functions
      3. Type Functions
      4. Mathematical Functions
      5. String Functions
      6. Miscellaneous Functions
    14. Using Less with External Frameworks
      1. Cardinal CSS
      2. Ionic and Less
      3. Semantic Grid System
    15. Summary
  14. Chapter 5 : Introduction to Compass
    1. Introduction to Compass
    2. Compass Installation
    3. Creating a Project in Compass
    4. Understanding config.rb
    5. Responsive Grids with Sass and Compass
      1. Introduction to Susy
      2. Getting Susy
      3. Using Susy to Your Project
      4. Showing the Grid Background
    6. Compass and CSS3
      1. Background-Gradient
      2. Border Radius
      3. Opacity
      4. Text Shadow
      5. Box Shadow
      6. Transitions
      7. Textfield Placeholder
    7. Image-url( )
      1. Image-width()
      2. Image-height()
    8. Image Sprites and Compass
    9. Text Hiding
    10. Inline Images with Compass
    11. CSS Transform
      1. Working with Compass Extensions
    12. Summary
  15. Index