You are previewing Less Web Development Cookbook.
O'Reilly logo
Less Web Development Cookbook

Book Description

Over 110 practical recipes to help you write leaner, more efficient CSS code

In Detail

Less is a dynamic style sheet language to help you make your CSS code more maintainable, readable, and reusable. It provides impressive features to enhance your web development skills with complex code techniques necessary for responsive websites.

This book contains more than 110 practical recipes to help you develop efficient projects through CSS extensions including variables, mixins, and functions. Optimize your projects by debugging code to create style guides, build responsive grids, and integrate Less into your WordPress development workflow.

This book includes Less v2 code and covers powerful tools such as Bootstrap and a wide-range of additional prebuilt mixin libraries, allowing you to set up a powerful development environment with Node.js and Grunt.

What You Will Learn

  • Integrate Less into your projects to boost efficiency

  • Spend less time debugging

  • Compile Less code into readable and maintainable CSS

  • Write reusable and portable code and avoid duplication

  • Make use of prebuilt and proven code

  • Reduce the development and maintenance time of your projects

  • Set up a development environment with Grunt

  • 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 files e-mailed directly to you.

    Table of Contents

    1. Less Web Development Cookbook
      1. Table of Contents
      2. Less Web Development Cookbook
      3. Credits
      4. Foreword
      5. About the Author
      6. About the Reviewers
      7. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      8. 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
      9. 1. Getting to Grips with the Basics of Less
        1. Introduction
        2. Downloading, installing, and integrating less.js
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        3. Installing the lessc compiler with npm
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. Using less.js with Rhino
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        5. Declaring variables with Less for commonly used values
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        6. Setting the properties of CSS styles with mixins
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        7. Writing more intuitive code and making inheritance clear with nested rules
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        8. Creating complex relationships between properties
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        9. Using the built-in functions of Less
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        10. Using namespaces to make your code reusable and portable
          1. Getting ready
          2. How to do it…
          3. How it works…
      10. 2. Debugging and Documenting Your Less Code
        1. Introduction
        2. Debugging your code with less.js
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        3. 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
        4. Using Chrome Developer Tools to debug your code
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Commenting your code in Less
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        6. Building style guides with tdcss.js
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        7. Building style guides with StyleDocco
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
      11. 3. Using Variables and Mixins
        1. Introduction
        2. Deriving a set of variables from a single base variable
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        3. Value escaping with the ~"value" syntax
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. Using variable interpolation
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Redeclaring variables based on lazy loading
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        6. Using mixins to set properties
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        7. Declaring a class and mixin at once
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        8. Using selectors inside mixins
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        9. Using parametric mixins
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
      12. 4. Leveraging the Less Built-in Functions
        1. Introduction
        2. Converting units with the convert() function
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        3. Using the default() function
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. Embedding images with data URIs
          1. Getting ready
          2. How to do it
          3. How it works…
          4. There's more…
          5. See also
        5. Formatting strings
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        6. Replacing a text within a string
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        7. Working with lists
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        8. Using mathematical functions
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        9. Using the color() function
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        10. Evaluating the type of a value
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        11. Creating color objects with RGB values
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        12. Getting information about a color
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        13. Creating a color variant with the darken() and lighten() functions
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        14. Creating overlays of two colors with Less
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
      13. 5. Extending and Referencing
        1. Introduction
        2. Referencing parent selectors with the & operator
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        3. Referencing to the parent selector more than once
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. Changing the selecting order with the & operator
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Using extend to merge selectors
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        6. Using extend inside a ruleset
          1. Getting ready
          2. How to do it…
          3. There's more…
          4. See also
        7. Extending with the all keyword
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        8. Extending with media queries
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        9. Using extend to reduce the compiled CSS size
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        10. Using extend as an alternative for a mixin
          1. Getting ready
          2. How to do it…
          3. How it works…
      14. 6. Advanced Less Coding
        1. Introduction
        2. Giving your rules importance with the !important statement
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        3. Using mixins with multiple parameters
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. Using duplicate mixin names
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Building a switch to leverage argument matching
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        6. Avoiding individual parameters to leverage the @arguments variable
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        7. Using the @rest... variable to use mixins with a variable number of arguments
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        8. Using mixins as functions
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        9. Passing rulesets to mixins
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        10. Using mixin guards (as an alternative for the if…else statements)
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        11. Building loops leveraging mixin guards
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        12. Applying guards to the CSS selectors
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        13. Creating color contrasts with Less
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        14. Changing the background color dynamically
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        15. Aggregating values under a single property
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
      15. 7. Leveraging Libraries with Prebuilt Mixins
        1. Introduction
        2. Importing and downloading prebuilt mixin libraries
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        3. Using namespacing with prebuilt libraries
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. Creating background gradients
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Building unlimited gradients with Less Hat
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        6. Building a layout with the CSS3 flexbox module
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        7. Getting retina ready with Preboot
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        8. Generating font-face declarations with Clearless
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        9. Improving your website's SEO with 3L mixins
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        10. Leveraging sprite images with Pre
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        11. Creating bidirectional styling without code duplication
          1. Getting ready
          2. How to do it…
          3. How it works
          4. There's more…
          5. See also
        12. Creating animations with animations.css
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. There's more…
          5. See also
        13. Creating animations with More.less
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        14. Building semantic grids with semantic.gs
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more
          5. See also
        15. Building an alternative for fluid grids with Frameless
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        16. Building a fluid responsive grid system
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
      16. 8. Building a Layout with Less
        1. Introduction
        2. Using CSS Reset with Less
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using the box-sizing property with Less
          5. See also
        3. Importing and organizing your Less files
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        4. Importing files with the @import directive
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        5. Building a grid with grid classes
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        6. Creating responsive grids
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        7. 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
        8. Applying the flexbox grid on your design
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        9. Integrating a navigation menu in the layout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        10. Repositioning your content
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      17. 9. Using Bootstrap with Less
        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...
          5. See also
        4. Making custom buttons
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        5. Making custom panels
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        6. Making custom navigation bars
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        7. Extending components using :extend
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        8. Reusing Bootstrap's grid
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        9. Using Bootstrap classes and mixins
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        10. Extending Bootstrap with your own mixins
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        11. Making custom color schemes with 1pxdeep
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        12. Autoprefixing Bootstrap's CSS
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      18. 10. Less and WordPress
        1. Introduction
        2. Installing WordPress
          1. Getting Ready
          2. How to do it…
          3. How it works
          4. There's more…
          5. See also
        3. Developing your WordPress theme with Less
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. Integrating Bootstrap into your WordPress theme
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Using Semantic UI to theme your WordPress website
          1. Getting Ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        6. Customizing Roots.io with Less
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        7. Building a WordPress website with the JBST theme
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
      19. 11. Compiling Less Real Time for Development Using Grunt
        1. Introduction
        2. Installing Node and Grunt
          1. Getting ready
          2. How to do it...
          3. How it works…
          4. There's more...
        3. Installing Grunt plugins
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. There's more...
        4. Utilizing the Gruntfile.js file
          1. Getting ready
          2. How to do it…
          3. How it works...
        5. Loading Grunt tasks
          1. Getting ready
          2. How to do it…
          3. How it works...
        6. Adding a configuration definition for a plugin
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. See also
        7. Adding the Less compiler task
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. There's more...
        8. Creating CSS source maps with the Less compiler task
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. There's more...
        9. Cleaning and minimizing your code
          1. Getting ready
          2. How to do it…
          3. There's more...
        10. Adding the watch task
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. There's more...
        11. Adding the connect and open task
          1. Getting ready
          2. How to do it…
          3. How it works…
        12. Adding the concurrent task
          1. Getting ready
          2. How to do it…
          3. How it works…
        13. Analyzing your code with CSS Lint
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. There's more...
        14. Removing unused CSS using Grunt
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. See also
        15. Compiling style guides with Grunt
          1. Getting ready
          2. How to do it…
        16. Automatically prefix your code with Grunt
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more...
        17. Installing the Grunt LiveReload plugin
          1. Getting ready
          2. How to do it…
          3. How it works…
      20. Index