You are previewing Sass and Compass Designer's Cookbook.
O'Reilly logo
Sass and Compass Designer's Cookbook

Book Description

Over 120 practical and easy-to-understand recipes that explain how to use Sass and Compass to write efficient, maintainable, and reusable CSS code for your web development projects

About This Book

  • Leverage Sass to make your CSS code maintainable, reusable and prevent code duplications

  • Shorten debug time with Sass when creating complex CSS code for different browsers and devices

  • Write easy and bullet-proof CSS with Compass using this step-by-step and detailed guide

  • Who This Book Is For

    This book is mainly intended for web developers and designers who are comfortable with CSS and HTML. If you are someone with some experience with CSS, you will find the learning curve of learning Sass syntax to be less steep. Basic knowledge of web development is helpful but you don't have to be a programmer to understand Sass.

    What You Will Learn

  • Spend less time debugging code

  • Compile Sass code into readable and maintainable CSS

  • Integrate Sass in your own projects

  • Reuse your code to prevent code duplications

  • Write reusable and portable CSS code

  • Make use of pre-built and established code written by other developers

  • Reduce development and maintenance time of your projects

  • Set up a development environment with Gulp

  • In Detail

    Sass and Compass Designer's Cookbook helps you to get most out of CSS3 and harness its benefits to create engaging and receptive applications. This book will help you develop faster and reduce the maintenance time for your web development projects by using Sass and Compass. You will learn how to use with CSS frameworks such as Bootstrap and Foundation and understand how to use other libraries of pre-built mixins. You will also learn setting up a development environment with Gulp.

    This book guides you through all the concepts and gives you practical examples for full understanding.

    Style and approach

    This book is the perfect mix of essential theory combined with real-life examples and problems, with clear explanations of the more sophisticated Sass concepts. Learn Sass and Compass with practical and well-explained example code. This book follows a problem and solution approach that is convenient to understand and follow.

    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 http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of Contents

    1. Sass and Compass Designer's Cookbook
      1. Table of Contents
      2. Sass and Compass Designer's Cookbook
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. eBooks, discount offers, and more
          1. Why Subscribe?
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Sections
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Conventions
        6. Reader feedback
        7. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Getting Started with Sass
        1. Introduction
        2. Installing Sass for command line usage
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Installing Compass
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        4. Using Sass on the command line
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        5. Using the Sass interactive mode and SassScript
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        6. Using the sass-gulp plugin with Gulp
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        7. Using Sass in the browsers
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        8. Writing Sass or SCSS
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        9. Choosing your output style
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        10. Working with partials
          1. Getting ready
          2. How to do it
          3. How it works...
          4. There's more…
          5. See also
        11. Writing your code in a text editor
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. There's more...
          5. See also
            1. Style guidelines
              1. GUIs for Sass
      9. 2. Debugging Your Code
        1. Introduction
        2. Using CSS source maps to debug your code
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Editing and debugging your Sass code in a browser
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        4. Commenting your code in the SCSS syntax
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        5. Building style guides with tdcss.js
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        6. Building style guides with the Kalei Styleguide
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        7. Using the @debug, @warn, and @error directives
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        8. Playing on SassMeister
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      10. 3. Variables, Mixins, and Functions
        1. Introduction
        2. Using variables
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Applying operations in Sass
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        4. Declaring variables with !default
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        5. Interpolation of variables
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        6. Leveraging mixins
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        7. Writing mixins with arguments
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        8. Duplicating mixins and name collisions
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        9. Creating pure Sass functions
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      11. 4. Nested Selectors and Modular CSS
        1. Introduction
        2. Using nested selectors
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Creating more intuitive code and making inheritance clear
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        4. Referencing parent selectors with the & sign
          1. Getting ready...
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        5. Using multiple & signs to refer to the parent selector more than once
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        6. Using the & operator to change the selector order
          1. Getting ready
          2. How to do it...
          3. How it works…
          4. There's more…
          5. See also
        7. Utilizing the @extend directive
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        8. Using placeholder selectors with the @extend directive
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        9. Using the @extend directive together with the @media at-rule
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        10. Using the @extend directive with care
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        11. Emitting rules at the root of the document
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        12. Avoiding nested selectors too deeply for more modular CSS
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        13. Applying the OOCSS, SMACSS, and BEM methodologies
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      12. 5. Built-in Functions
        1. Introduction
        2. Color functions
          1. Getting ready
          2. How to do it...
          3. How it works....
          4. There's more...
          5. See also
        3. String functions
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        4. Number functions
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        5. List functions
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        6. Map functions
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        7. Selector functions
          1. Getting ready
          2. How to do it....
          3. How it works...
          4. There's more...
          5. See also
        8. Introspection functions
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        9. Conditional assignments
          1. Getting ready
          2. How to do it...
          3. How it works
          4. There is more...
        10. Adding custom functions to Sass
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      13. 6. Using Compass
        1. Introduction
        2. Extending Sass with Compass helper functions
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Truncating Text with ellipses
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        4. Tuning vendor prefixes from Compass stylesheets
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        5. Adding Compass to an existing Sass project
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        6. Maintaining your applications with Compass
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        7. Using Bootstrap with Compass
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
      14. 7. Cross-Browser CSS3 Mixins
        1. Introduction
        2. Browser support
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Using vendor prefixes
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        4. Cross browser CSS3 with Compass
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        5. The Can I Use database
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        6. Applying progressive enhancement
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        7. The -prefix-free library
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        8. Mobile first strategies
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      15. 8. Advanced Sass Coding
        1. Introduction
        2. Using @if
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Using @for
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        4. Using @each
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        5. Loops with @while
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        6. Creating a vertical rhythm for your website
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        7. Creating color contrasts automatically
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        8. Using icon fonts
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        9. Image sprites with Compass
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        10. Media queries with Breakpoint
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      16. 9. Building Layouts with Sass
        1. Introduction
        2. Using a CSS Reset
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Importing and organizing your files
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        4. Building a grid with grid classes
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
            1. Using the box-sizing property with Sass
          5. See also
        5. Creating responsive grids
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        6. Building a semantic grid with mixins
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        7. Applying the grid on your design
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        8. Integrating a vertical navigation menu in your layout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        9. Creating grids with semantic.gs
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        10. Using Compass Layout Module
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      17. 10. Building Grid-based Layouts with Susy and Sass
        1. Introduction
        2. Installing and configuring Susy
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Defining containers and columns
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        4. Mobile first and responsive grids
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        5. Preventing subpixel rounding errors
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        6. Generating asymmetric layouts
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      18. 11. Foundation and Sass
        1. Introduction
        2. Installing Foundation CLI
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Integrating Foundation in a Compass project
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        4. Creating semantic grids with Foundation
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There is more...
          5. See also
        5. Building off-canvas menus with Sass and JavaScript
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        6. Using Foundation 6 with WordPress and Sass
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There is more...
          5. See also
      19. 12. Bootstrap and Sass
        1. Introduction
        2. Downloading and installing Bootstrap
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Customizing Bootstrap with variables
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Compiling Bootstrap or the project file
          5. See also
        4. Configuring Bootstrap using variables
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        5. Making custom buttons
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        6. Making custom cards
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        7. Making custom navbars
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        8. Extending components using @extend
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        9. Using Bootstrap mixins and classes
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        10. Extending the mixins with your own mixins
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        11. Implementing semantic layouts with Bootstrap
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        12. Using WordPress with Bootstrap and Sass
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      20. 13. Meeting the Bourbon Family
        1. Introduction
        2. Bourbon mixins for prefixing
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more
          5. See also
        3. Creating visual triangles
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more
          5. See also
        4. Using modular scales for typefacing
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more
          5. See also
        5. Semantic grids with Neat
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more
          5. See also
        6. Creating buttons with Bitters
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        7. Using the page navigation component from Refills
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more
          5. See also
      21. 14. Ruby on Rails and Sass
        1. Introduction
        2. Hello world with Ruby on Rails
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        3. Explaining the main.css.scss file
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        4. Adding Compass to your Ruby on Rails setup
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        5. Using Susy with Ruby on Rails
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        6. Using Bourbon inside Rails
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        7. Integrating Bootstrap
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        8. Creating a RoR app with Foundation 6
          1. How to do it...
          2. How it works...
          3. There's more…
          4. See also
      22. 15. Building Mobile Apps
        1. Introduction
        2. Installing the Ionic framework
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        3. Starting a new Ionic project using Sass
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        4. Customizing the buttons of your Ionic project
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
        5. Setting up a Foundation App project
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        6. Using mixins to customize your Foundation App project
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
      23. 16. Setting up a Build Chain with Grunt
        1. Introduction
        2. Installing Grunt
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Installing Grunt plugins
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        4. Utilizing the Gruntfile.js file
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        5. Adding a configuration definition for a plugin
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        6. Adding the Sass compiler task
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        7. Integrating Compass in the build chain
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        8. Installing Bourbon in the build chain
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        9. Automatically prefixing your code with Grunt
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        10. Getting Grunt watch for Sass, and LiveReload to work
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        11. Utilizing Yeoman
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      24. Index