Beginning CSS Preprocessors: With SASS, Compass.js, and Less.js

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