Less Web Development Cookbook

By Bass Jobsen and Amin Meyghani

About This Book

• Create and customize your website effectively and easily with Less Version 2
• Develop more efficient code, and decrease your investment in debugging complex code
• With implementation of the latest version Less.js V2, leverage Less separately from its node and browser and employ many other improvements, such as plugin support.
• Discover the dynamism of Less and manage your projects with efficiency and accuracy

Who This Book Is For

Aimed at those who want to overcome the limitations of CSS, through this book you will begin to harness the efficiency of Less by building advanced, responsive, and modern websites. Experienced web developers, students, and even web designers will find this guide very useful as they enhance their CSS skills.

• Language: English
• Publisher: Packt Publishing
• Release date: Jan 31, 2015
• ISBN: 9781783981496

Book preview

Table of Contents

Less Web Development Cookbook

Credits

Foreword

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Getting ready

How to do it…

How it works…

There's more…

See also

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Getting to Grips with the Basics of Less

Introduction

Downloading, installing, and integrating less.js

Getting ready

How to do it…

How it works…

There's more…

See also

Installing the lessc compiler with npm

Getting ready

How to do it…

How it works…

There's more…

See also

Using less.js with Rhino

Getting ready

How to do it…

How it works…

There's more…

Declaring variables with Less for commonly used values

Getting ready

How to do it…

How it works…

There's more…

See also

Setting the properties of CSS styles with mixins

Getting ready

How to do it…

How it works…

There's more…

Writing more intuitive code and making inheritance clear with nested rules

Getting ready

How to do it…

How it works…

There's more…

See also

Creating complex relationships between properties

Getting ready

How to do it…

How it works…

There's more…

See also

Using the built-in functions of Less

Getting ready

How to do it…

How it works…

There's more…

See also

Using namespaces to make your code reusable and portable

Getting ready

How to do it…

How it works…

2. Debugging and Documenting Your Less Code

Introduction

Debugging your code with less.js

Getting ready

How to do it…

How it works…

There's more…

See also

Using CSS source maps to debug your code

Getting ready

How to do it…

How it works…

There's more…

See also

Using Chrome Developer Tools to debug your code

Getting ready

How to do it…

How it works…

There's more…

See also

Commenting your code in Less

Getting ready

How to do it…

How it works…

There's more…

See also

Building style guides with tdcss.js

Getting ready

How to do it…

How it works…

See also

Building style guides with StyleDocco

Getting ready

How to do it…

How it works…

There's more…

See also

3. Using Variables and Mixins

Introduction

Deriving a set of variables from a single base variable

Getting ready

How to do it…

How it works…

See also

Value escaping with the ~value syntax

Getting ready

How to do it…

How it works…

There's more…

See also

Using variable interpolation

Getting ready

How to do it…

How it works…

There's more…

See also

Redeclaring variables based on lazy loading

Getting ready

How to do it…

How it works…

There's more…

See also

Using mixins to set properties

Getting ready

How to do it…

How it works…

There's more…

See also

Declaring a class and mixin at once

Getting ready

How to do it…

How it works…

There's more…

See also

Using selectors inside mixins

Getting ready

How to do it…

How it works…

There's more…

See also

Using parametric mixins

Getting ready

How to do it…

How it works…

There's more…

See also

4. Leveraging the Less Built-in Functions

Introduction

Converting units with the convert() function

Getting ready

How to do it…

How it works…

There's more…

See also

Using the default() function

Getting ready

How to do it…

How it works…

There's more…

See also

Embedding images with data URIs

Getting ready

How to do it

How it works…

There's more…

See also

Formatting strings

Getting ready

How to do it…

How it works…

There's more…

Replacing a text within a string

Getting ready

How to do it…

How it works…

There's more…

See also

Working with lists

Getting ready

How to do it…

How it works…

There's more…

Using mathematical functions

Getting ready

How to do it…

How it works…

There's more…

See also

Using the color() function

Getting ready

How to do it…

How it works…

There's more…

See also

Evaluating the type of a value

Getting ready

How to do it…

How it works…

There's more…

Creating color objects with RGB values

Getting ready

How to do it…

How it works…

There's more…

See also

Getting information about a color

Getting ready

How to do it…

How it works…

See also

Creating a color variant with the darken() and lighten() functions

Getting ready

How to do it…

How it works…

There's more…

Creating overlays of two colors with Less

Getting ready

How to do it…

How it works…

There's more…

See also

5. Extending and Referencing

Introduction

Referencing parent selectors with the & operator

Getting ready

How to do it…

How it works…

There's more…

See also

Referencing to the parent selector more than once

Getting ready

How to do it…

How it works…

There's more…

See also

Changing the selecting order with the & operator

Getting ready

How to do it…

How it works…

There's more…

See also

Using extend to merge selectors

Getting ready

How to do it…

How it works…

There's more…

Using extend inside a ruleset

Getting ready

How to do it…

There's more…

See also

Extending with the all keyword

Getting ready

How to do it…

How it works…

There's more…

See also

Extending with media queries

Getting ready

How to do it…

How it works…

There's more…

See also

Using extend to reduce the compiled CSS size

Getting ready

How to do it…

How it works…

There's more…

See also

Using extend as an alternative for a mixin

Getting ready

How to do it…

How it works…

6. Advanced Less Coding

Introduction

Giving your rules importance with the !important statement

Getting ready

How to do it…

How it works…

There's more…

See also

Using mixins with multiple parameters

Getting ready

How to do it…

How it works…

There's more…

See also

Using duplicate mixin names

Getting ready

How to do it…

How it works…

There's more…

See also

Building a switch to leverage argument matching

Getting ready

How to do it…

How it works…

There's more…

See also

Avoiding individual parameters to leverage the @arguments variable

Getting ready

How to do it…

How it works…

There's more…

See also

Using the @rest... variable to use mixins with a variable number of arguments

Getting ready

How to do it…

How it works…

There's more…

Using mixins as functions

Getting ready

How to do it…

How it works…

There's more…

See also

Passing rulesets to mixins

Getting ready

How to do it…

How it works…

There's more…

See also

Using mixin guards (as an alternative for the if…else statements)

Getting ready

How to do it…

How it works…

There's more…

See also

Building loops leveraging mixin guards

Getting ready

How to do it…

How it works…

There's more…

See also

Applying guards to the CSS selectors

Getting ready

How to do it…

How it works…

There's more…

Creating color contrasts with Less

Getting ready

How to do it…

How it works…

There's more…

See also

Changing the background color dynamically

Getting ready

How to do it…

How it works…

There's more…

See also

Aggregating values under a single property

Getting ready

How to do it…

How it works…

There's more…

See also

7. Leveraging Libraries with Prebuilt Mixins

Introduction

Importing and downloading prebuilt mixin libraries

Getting ready

How to do it…

How it works…

There's more…

See also

Using namespacing with prebuilt libraries

Getting ready

How to do it…

How it works…

There's more…

See also

Creating background gradients

Getting ready

How to do it…

How it works…

There's more…

See also

Building unlimited gradients with Less Hat

Getting ready

How to do it…

How it works…

There's more…

See also

Building a layout with the CSS3 flexbox module

Getting ready

How to do it…

How it works…

There's more…

See also

Getting retina ready with Preboot

Getting ready

How to do it…

How it works…

There's more…

See also

Generating font-face declarations with Clearless

Getting ready

How to do it…

How it works…

There's more…

See also

Improving your website's SEO with 3L mixins

Getting ready

How to do it…

How it works…

There's more…

See also

Leveraging sprite images with Pre

Getting ready

How to do it…

How it works…

There's more…

See also

Creating bidirectional styling without code duplication

Getting ready

How to do it…

How it works

There's more…

See also

Creating animations with animations.css

Getting ready

How to do it…

How it works...

There's more…

See also

Creating animations with More.less

Getting ready

How to do it…

How it works…

There's more…

Building semantic grids with semantic.gs

Getting ready

How to do it...

How it works...

There's more

See also

Building an alternative for fluid grids with Frameless

Getting ready

How to do it…

How it works…

See also

Building a fluid responsive grid system

Getting ready

How to do it…

How it works…

There's more…

See also

8. Building a Layout with Less

Introduction

Using CSS Reset with Less

Getting ready

How to do it...

How it works...

There's more...

Using the box-sizing property with Less

See also

Importing and organizing your Less files

Getting ready

How to do it...

How it works...

There's more...

Importing files with the @import directive

Getting ready

How to do it...

How it works...

There's more...

See also

Building a grid with grid classes

Getting ready

How to do it...

How it works...

There's more...

See also

Creating responsive grids

Getting ready

How to do it...

How it works...

There's more...

See also

Building a semantic grid with mixins

Getting ready

How to do it...

How it works...

There's more...

See also

Applying the flexbox grid on your design

Getting ready

How to do it...

How it works...

There's more...

See also

Integrating a navigation menu in the layout

Getting ready

How to do it...

How it works...

There's more...

See also

Repositioning your content

Getting ready

How to do it...

How it works...

There's more...

See also

9. Using Bootstrap with Less

Introduction

Downloading and installing Bootstrap

Getting ready

How to do it...

How it works...

There's more...

See also

Customizing Bootstrap with variables

Getting ready

How to do it...

How it works...

There's more...

See also

Making custom buttons

Getting ready

How to do it...

How it works...

There's more...

See also

Making custom panels

Getting ready

How to do it...

How it works...

There's more...

See also

Making custom navigation bars

Getting ready

How to do it...

How it works...

There's more...

See also

Extending components using :extend

Getting ready

How to do it...

How it works...

There's more...

See also

Reusing Bootstrap's grid

Getting ready

How to do it...

How it works...

There's more...

See also

Using Bootstrap classes and mixins

Getting ready

How to do it...

How it works...

There's more...

Extending Bootstrap with your own mixins

Getting ready

How to do it...

How it works...

There's more...

See also

Making custom color schemes with 1pxdeep

Getting ready

How to do it...

How it works...

There's more...

See also

Autoprefixing Bootstrap's CSS

Getting ready

How to do it...

How it works...

There's more...

See also

10. Less and WordPress

Introduction

Installing WordPress

Getting Ready

How to do it…

How it works

There's more…

See also

Developing your WordPress theme with Less

Getting ready

How to do it…

How it works…

There's more…

See also

Integrating Bootstrap into your WordPress theme

Getting ready

How to do it…

How it works…

There's more…

See also

Using Semantic UI to theme your WordPress website

Getting Ready

How to do it…

How it works…

There's more…

See also

Customizing Roots.io with Less

Getting ready

How to do it…

How it works…

There's more…

See also

Building a WordPress website with the JBST theme

Getting ready

How to do it…

How it works…

There's more…

See also

11. Compiling Less Real Time for Development Using Grunt

Introduction

Installing Node and Grunt

Getting ready

How to do it...

How it works…

There's more...

Installing Grunt plugins

Getting ready

How to do it…

How it works...

There's more...

Utilizing the Gruntfile.js file

Getting ready

How to do it…

How it works...

Loading Grunt tasks

Getting ready

How to do it…

How it works...

Adding a configuration definition for a plugin

Getting ready

How to do it…

How it works...

See also

Adding the Less compiler task

Getting ready

How to do it…

How it works...

There's more...

Creating CSS source maps with the Less compiler task

Getting ready

How to do it…

How it works...

There's more...

Cleaning and minimizing your code

Getting ready

How to do it…

There's more...

Adding the watch task

Getting ready

How to do it…

How it works...

There's more...

Adding the connect and open task

Getting ready

How to do it…

How it works…

Adding the concurrent task

Getting ready

How to do it…

How it works…

Analyzing your code with CSS Lint

Getting ready

How to do it…

How it works...

There's more...

Removing unused CSS using Grunt

Getting ready

How to do it…

How it works...

See also

Compiling style guides with Grunt

Getting ready

How to do it…

Automatically prefix your code with Grunt

Getting ready

How to do it…

How it works…

There's more...

Installing the Grunt LiveReload plugin

Getting ready

How to do it…

How it works…

Index

Less Web Development Cookbook

---

Less Web Development Cookbook

Copyright © 2015 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing and its dealers and distributors, will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: January 2015

Production reference: 1250115

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78398-148-9

www.packtpub.com

Credits

Authors

Bass Jobsen

Amin Meyghani

Reviewers

Fahad Ibnay Heylaal

Dave Poon

Steve Workman

Commissioning Editor

Ashwin Nair

Acquisition Editors

Richard Brookes-Bland

Richard Harvey

Content Development Editor

Akashdeep Kundu

Technical Editors

Shashank Desai

Novina Kewalramani

Mrunmayee Patil

Rikita Poojari

Copy Editors

Gladson Monteiro

Sarang Chari

Project Coordinator

Milton Dsouza

Proofreaders

Lauren E. Harkins

Paul Hindle

Amy Johnson

Indexer

Monica Ajmera Mehta

Production Coordinator

Conidon Miranda

Cover Work

Conidon Miranda

Foreword

I became interested in Less after starting work on a project to expand a complex web application that had just two large CSS files (one went over IE's limit for a number of selectors in a file), and it used a regex replacement for theme variables—it was a nightmare. There was no link between colors that were clearly visually linked and numbers that were clearly related, and the connection was not obvious and copy/pasted blocks of CSS, scattered throughout the file. At first, it looked manageable, but then as we made changes and fixed bugs, we found that changing something at one place meant having to find several other places where change was required. What was worse, perhaps, was that developers were just adding yet another more complex selector to override another specific place—ad infinitum—until there were older, simpler selectors that weren't even used anywhere. I thought there must be a better way and found Less, which is a superset of CSS, focused on fixing these kind of maintainability problems by making CSS more declarative. I started off with my involvement by porting Less.js to dotless and then became an integral part of the team, taking over from Alexis in maintaining and expanding Less.js to keep up with the demands of the ever-evolving WWW, third-party library usage, and new ideas for CSS management.

I still consider that the primary job of Less is to allow the web developer to have maintainable CSS in their project. For this, abstraction of variables, splitting them up into separate files, and abstraction of common selectors and properties is the most important task (though a long way from what Less can do). We do not implement every feature request but instead try and choose those that have the biggest impact. We are generally against a feature that just provides a different way of doing something. Sometimes this means the solution to problems is not the most obvious one. I hope this will encourage developers to create code with consistent patterns, and I would urge them to try and keep their Less code simple and consistent and ensure it follows the same kind of generally accepted maintainability approaches that are applied to more traditional programming languages. Where common problems would be better served with new Less features, I hope we identify them and always welcome input, discussions, and help to our Github repository. However, it was a recent aim of the project to enable plugins for Less so that projects that need it can implement their own extensions without burdening the core project with support, for instance, functions for 10 different color models.

One plugin I would really like to push people to use is Less-plugin-autoprefixer. In the future, older browsers will not be in use and old polyfills (such as SVG Gradient backgrounds) and prefixed properties will be, if not a thing of the past, a less common occurrence. By using this plugin, you can write your CSS in a forward-thinking way and do not have to bloat it with mixins for polyfills that will be repeated across every project you will work on.

The features most asked for, which I've implemented over the last couple of years, have tended to focus on using libraries. I think this reflects the rise of people using CSS frameworks such as Bootstrap to get a head start at the beginning of a project in order to avoid reimplementing the bare bones. This I think is very positive as it promotes reuse and reduces the number of ways in which fundamentals are done. The biggest problem that remains with libraries is around picking out the bits you want to keep and customizing the library into a project's particular need. Hopefully, Less' import reference feature, not Sass-like extension will help us with this.

As with any language, problems always present themselves out of nowhere, and it always helps to get a head start on good solutions. So keep your solutions maintainable and elegant and enjoy reading this book.

L uke Page

Technical Lead Developer, Scott Logic Ltd. (http://uk.linkedin.com/pub/luke-page/35/81b/3b6)

About the Author

Bass Jobsen has been programming for the Web since 1995, covering everything from C to PHP, and is always on the hunt to find the most accessible interfaces. Based in Orthen, the Netherlands, he has also written Less Web Development Essentials, Packt Publishing, which is a fast-paced tutorial that covers the fundamentals of Less (Leaner CSS) when used in web development.

Bass uses Less in his daily job for web design tasks, WordPress theme development, and other Twitter Bootstrap apps.

He is always happy to help those with questions (http://stackoverflow.com/users/1596547/bass-jobsen), and he writes a blog you can find at http://bassjobsen.weblogs.fm/.

Also, check out his Bootstrap WordPress starters theme (JBST) and other projects at GitHub (https://github.com/bassjobsen).

This book is for Colinda, Kiki, Dries, Wolf, and Leny.

Writing this book wasn't possible without the support of my family, Caroliene, and the people of Vivent. Richard Harvey is a patient and excellent motivator and critical reader. Akashdeep Kundu helped me to dot the i's and cross the t's. I'd also like to thank the reviewers of this book, Dave Poon, Steve Workman, and Fahad Heylaal, for their critical and valuable suggestions that made this book even better.

Last but not least, I should not forget to thank the Less core Team: Alexis Sellier (@cloudhead), Jon Schlinkert (@jonschlinkert), Luke Page (@lukeapage), Marcus Bointon (@Synchro), Mária Jurčovičová (@sommeri), Matthew Dean (@matthew-dean), Max Mikhailov (@seven-phases-max), and all the other contributors who have made coding Less possible in the first place.

Amin Meyghani is a designer and developer currently working at HD MADE (http://hdmade.com/), making automation tools, websites, and apps. He is also a lead developer at Flitti (http://flitti.com/), leading the team to make next-generation gamification apps. In addition to arts and technology, Amin has always been passionate about teaching. He takes advantage of every opportunity to share his knowledge with the world through books, blogs, or videos. You can find his works and blogs at http://meyghani.com/. When Amin is not coding, he is either enjoying Persian food or mastering his Persian calligraphy techniques.

I would like to thank my family for always supporting me and filling my life with love and hope. I owe them this book, as they have always been there for me even in the most difficult times.

About the Reviewers

Fahad Ibnay Heylaal is a developer who hails from Bangladesh and is currently living and working in Amsterdam. Mostly known for being the creator of Croogo (a CMS based on the CakePHP framework), he has progressed to become more of a frontend developer over the last couple of years. If he isn't coding, chances are high that he will be seen cycling around the beautiful canals of Amsterdam.

Dave Poon is a UX/UI designer, web developer, and entrepreneur based in Sydney. He graduated from Central Queensland University with a degree in multimedia studies and a master's degree in IT. He began his career as a freelance graphics and web designer in 1998 and currently works with web development agencies and medium-sized enterprises. He began his love affair with Drupal afterward and worked for a variety of companies using Drupal. Now, he is evangelizing good user experience and interaction design practices to start-ups and enterprises.

Currently, he is a design lead at Suncorp, one of the biggest financial institutions in Australia. He is the cofounder of Erlango (http://erlango.com), a digital product development and design startup located in Sydney and Hong Kong that creates user-centered digital products for clients and users. He is also the cofounder of SpikeNode (http://spikenode.com) which is, a platform for DevOps automation.

He is the author of Drupal 7 Fields/CCK Beginner's Guide, Packt Publishing.

Also, he is the technical reviewer of the books Drupal Intranets with Open Atrium, Advanced Express Web Application Development, and Mastering Web Application Development with Express, all by Packt Publishing.

I would like to thank my wife, Rita, for her endless patience and support. Without her, whatever I do would be meaningless.

I would also like to thank my father for his continued encouragement.

Steve Workman is a frontend web engineer and an organizer of the London Web Standards group. He is a champion at creating high-performance sites with the latest web technologies and making developers' lives easier with tools and new languages.

I'd like to thank the whole Less community for creating this great language and my wife, Emily, for always being there.

www.PacktPub.com

Support files, eBooks, discount offers, and more

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com, and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via a web browser

Free access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.

Preface

CSS has dramatically changed since its very first emergence, and it is continuing to evolve. In particular, the emergence of CSS3 has added many new features to CSS, including gradients and animations. Along with this are many new opportunities to build websites using only CSS and HTML. Developers are no longer dependent on techniques such as Flash and other tricks to build interactive and fancy websites.

CSS3 has played an integral role in building responsive websites, where CSS media queries have made it possible to apply some styles dependent on the width of the browser's viewport only.

Despite this improvement, CSS is inherently, at its core, a simple style sheet language that lacks some fundamental programming features such as variables, functions, and operators. The need for more maintainable CSS, especially with the explosion of complex web apps, has made CSS preprocessors such as Less a necessity in enabling us to write more readable and manageable versions without breaking cross-browser compatibilities.

Although Less cannot magically change CSS, it certainly provides us with the tools to help structure, modularize, debug, and maintain small or large CSS projects more easily. By extending CSS with variables, functions, and mixins; nesting CSS selectors; and allowing you to follow the don't repeat yourself (DRY) principle of software programming, Less behaves more like a programming language in a way that CSS never was. Despite some of the programming characteristics of Less, you should not be put off by this; by being built as a superset of CSS, its features are implemented in the CSS way and it follows W3C standards where possible. Designers and developers who are familiar with CSS will find coding in Less very natural. Because Less fixes these shortcomings of CSS, the best time to start using Less is now!

In this book, you are going to explore the Less preprocessor, most of its core, and some of its less frequently used features. Through these very easy-to-follow and practical recipes, you will learn how to write more maintainable and scalable CSS. You will explore making components and structures through reusable mixins and extends. We will also learn about frameworks that are based on Less, exploring their features and how they can be seamlessly integrated into your own projects. In addition, you will learn how to use prebuilt mixin libraries for your current or upcoming projects. Finally, you will look at debugging techniques that have been available for other preprocessors and are now available to Less through source maps. By the end of this book, you will have an extended knowledge and a good understanding of the power of Less, its libraries, and the important features it has to offer to make writing your CSS more natural, productive, and intuitive.

What this book covers

Chapter 1, Getting to Grips with the Basics of Less, shows you how to install the Less compiler for client- and server-side usage. After the installation, you will be shown how to make use of the basic features of Less: using variables, mixins, operations, built-in functions, and namespaces; how to nest your rules will also be on the menu here!

Chapter 2, Debugging and Documenting Your Less Code, shows you how to debug your Less code using your CSS source maps and browser developer tools. You will also be introduced to style guides and learn how to properly comment your code.

Chapter 3, Using Variables and Mixins, covers the advanced usage of variables and mixins in Less. After reading this chapter, you will