You are previewing Sass Essentials.
O'Reilly logo
Sass Essentials

Book Description

Develop efficient and streamlined CSS styles using Sass for any website or online application with minimal effort and maximum scope for reusability in future projects

In Detail

Sass is a professional grade CSS extension language known for its stability and versatility in the field of web design. It introduces new concepts to CSS, such as variables and nesting, that allow users to speed up their workflows and make their code more dynamic.

Sass Essentials is a fast-paced, hands-on guide that breaks down the mysteries of preprocessing CSS styles using the Sass preprocessor and shows you how you can apply simple techniques to quickly and efficiently create CSS style sheets.

With this book, you will dive in and familiarize yourself with some popular directives and see how, with some care and planning, they can prove to be really powerful tools to use in Sass.

What You Will Learn

  • Install Sass and compile code to produce valid CSS style sheets

  • Work with mixins and variables to help streamline writing styles

  • Define CSS attribute values using the power of functions and operators

  • Reduce repetition of code through the use of nesting styles

  • Understand how to rationalize code by extending existing styles

  • Explore the use of directives to control how styles are created

  • Apply techniques to existing projects or well-known applications such as WordPress or Bootstrap

  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

    Table of Contents

    1. Sass Essentials
      1. Table of Contents
      2. Sass Essentials
      3. Credits
      4. About the Author
      5. About the Reviewers
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Introducing Sass
        1. Getting acquainted with Sass
        2. Preparing our project area
        3. Installing and compiling Sass
          1. Adding Sass support to Sublime Text
          2. Compiling Sass files within Sublime Text
          3. Removing installed packages
        4. Using GUI-based compilers
          1. Installing Koala
        5. Compiling Sass manually
        6. Using Node and Grunt
          1. Testing our installation
          2. Exploring the compilation process
        7. Using source maps
        8. Creating a simple layout
          1. Setting up our compilation process
          2. Preparing the markup and styles
          3. Dissecting the Sass styles
        9. Summary
      9. 2. Creating Variables and Mixins
        1. Making a start on our code
        2. Altering the compilation process
        3. Creating variables
          1. Exploring what happened
          2. Using variables to create colors
        4. Working across multiple files
          1. Adapting our color box demo
        5. Adding comments
        6. Building mixins
          1. Moving mixins to an external file
          2. Passing arguments to mixins
          3. Exploring the use of @import
          4. Extending existing styles
        7. Using prebuilt mixin libraries
          1. Animating content using Sass
          2. Adapting existing mixins to use libraries
        8. Summary
      10. 3. Building Functions, Operations, and Nested Styles
        1. Creating values using functions and operators
          1. Creating colors using functions
            1. Changing the colors in use
          2. Mixing colors
          3. Using an external library
          4. Changing font sizes using operators
        2. Creating site themes using functions
          1. Creating palettes using functions
          2. Using tools to create palettes
            1. Trying out an alternative palette
          3. Using maps to reference colors
          4. Applying filters using Sassmatic
          5. Recognizing the difference between functions and mixins
        3. Constructing layouts using functions and operators
        4. Reducing code repetition with nesting
        5. Using interpolation
        6. Summary
      11. 4. Directing Sass
        1. Working with the @extend directive
        2. Using and abusing multiple inheritance
          1. Exploring the benefits of using @extend
          2. Creating dialog boxes using @extend
        3. Making a site responsive with @media
          1. Installing the Breakpoint mixin for Sass
          2. Retrofitting responsive capabilities to a page
        4. Exploring media bubbling in Sass in more detail
        5. Controlling the outcome of our code
          1. Using the @if directive
          2. Working with the @for directive
          3. Exploring the @each directive
          4. Getting social in Sass
          5. Building animations using Sass
            1. Exploring the key to our animations
        6. Summary
      12. 5. Incorporating Sass into Projects
        1. Converting existing projects to use Sass
          1. Incorporating Sass into existing sites
        2. Incorporating CSS grids
          1. Setting up Bourbon Neat
          2. Creating grids with Bourbon Neat
        3. Applying Sass to frameworks, such as Bootstrap
          1. Implementing Bootstrap-Sass
          2. Exploring what happened
        4. Using a CMS system
          1. Choosing a Sass theme for WordPress
          2. Adapting a WordPress theme to use Sass
          3. Using a plugin to compile Sass in WordPress
          4. Compiling code outside of WordPress
          5. Making changes to our WordPress theme
          6. Adding comments to our code
        5. Other projects using Sass
        6. Summary
      13. Index