Learning Less.js

Alex Libby

• Publisher: Packt Publishing
• Year: 2014
• ISBN:
  9781782160663
• Edition: 1
• Topic: Diseño
• Subtopic: Diseño UI/UX

Writing CSS styles can be very tedious–how many times have you written CSS styles that become difficult to read and manage, and frequently have to be duplicated? Less gives you a solid toolkit that can help streamline your code when developing styles for any website of any size, with a significant reduction in the amount of time and effort required.

Learning Less.js helps you maximize your experience with the Less library by breaking down each of its main features. This book walks you through examples that progressively build upon your knowledge, taking you from beginner to advanced usage in a series of easy-to-follow steps. We begin with exploring the library, and will learn about the tricks it uses to help us save development time when creating and managing styles, right through to using Less.js in some practical, real-world scenarios.

Learning Less.js

---

Table of Contents

Learning Less.js

Credits

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

Conventions

Reader feedback

Customer Support

Downloading the example code

Errata

Piracy

Questions

1. Introducing Less

The role of HTML and CSS

The limitations of using CSS

The benefits of using CSS preprocessors

Why not just write normal CSS?

Introducing Less as a solution

Why you should use Less

Reducing redundancy with variables

Understanding the syntax of variables

Creating reusable blocks of code

Generating values automatically

Forgetting about vendor prefixes

Creating media queries and animation the simple way

Reusing code across multiple projects

Compressing CSS automatically for faster websites

Supporting CSS4 standards within Less

Supporting future CSS standards within Less

Summary

2. Building a Less Development Toolkit

Choosing an IDE or editor

Installing Sublime Text 2

Adding Less syntax support

Compiling Less files with a standalone compiler

WinLess

SimpLESS

Koala

Installing Crunch!

Compiling from the command line

Watching for changes to Less files

Compiling Less files directly from text editors

Installing the compilation support via a package

Debugging Less in browsers

Debugging the Less code using Firefox

Debugging the Less code in Chrome

Installing WampServer

Other useful tools

Summary

3. Getting Started with Less

Creating the foundation page

Downloading and installing Less

Installing Less on the client side

Using a CDN

Installing Less on the server side

Installing Less using Node

Installing Less using Bower

Using the Bower package

The dangers of using Less on the client side

Exploring the syntax used by Less

Working with variables

Changing variables programmatically

Creating mixins

Nesting styles in Less

Calculating values using operations

Extending existing styles in Less

Compiling the code and viewing results

Using a standalone compiler

Using the command-line compiler

Compiling Less files using the command line

Watching for changes in Watch mode

Summary

4. Working with Variables, Mixins, and Functions

Discovering variables in Less

Creating Polaroid images

Loading variables and setting the scope

Exploring mixins

Creating a web form

Adding basic mixins

Hiding the original mixin

Using the !important keyword

Developing parametric mixins

Passing multiple parameters

Applying conditions to mixins

Using special keywords

Creating mixins as functions

Using external libraries

Introducing functions

Creating column-based layouts

Moving calculations to a mixin

Working with the data-uri function

Using the data-uri function – some words of caution

Summary

5. Inheritance, Overriding, and Nesting in Less

Nesting styles in Less

Creating a business card

Examining the process in detail

Inheriting and overriding styles with extend

Using extend to create information alerts

Extending using the all keyword

Namespacing in Less

Lazy loading of variables in Less

Importing style sheets into Less

Avoiding code bloat

Summary

6. Migrating Your Site to Less

Preparing for the initial jump

Creating the initial framework

Mixing Less with plain CSS

Spotting low-hanging fruit

Identifying patterns in your CSS

Using prebuilt mixin libraries

Building a library of mixins

Working through a practical example

Introducing the CSS

Identifying the changes to be made

Making the changes

Using the CSS3 mixins

Creating variables for fonts

Creating variables for colors

Switching to using nesting

Incorporating our own mixins

Importing images into style sheets – a bonus

Viewing the finished article

Summary

7. Manipulating Fonts with Less

Creating simple font mixins

Extending the mixin

Using @font-face with Less

Downloading the font files

Embedding the font into our demo

Using a prebuilt library to handle fonts

Using variables to calculate sizes

Moving with the times

Handling different weights

Working with @media in Less

Creating a basic media query

Examining the Less file

Creating special effects using Less

Taking effects further

Summary

8. Media Queries with Less

Introducing media queries

The limitations of CSS

Setting client criteria

Exploring media queries

Defining media types

Exploring media features

Using logical operators

Designing media queries

Creating a simple example

Using tools to resize the screen

Building responsive pages

Building the basic page

Adding responsive queries

Adding responsive images

Incorporating retina support for images

Using prebuilt libraries

Summary

9. Working with Less in a CMS

Introducing the WP theme structure

Preparing our environment

Creating a basic child theme

Adding support for Less in WordPress

Showing Less style sheets to specific users

Adding Less support using a plugin

Working with Less themes in WordPress

Converting themes to use Less

Creating our own theme

Taking construction further

Using a prebuilt Less theme

Automating WordPress development

Using Grunt in WordPress development

Summary

10. Using Bootstrap with Less

Dissecting Bootstrap's Less file structure

Downloading the library

Configuring Bootstrap for your site

Using Internet Explorer 8 or below

Building a more realistic site

Compiling the Bootstrap CSS and JavaScript

Examining Bootstrap's mixins

Dissecting Bootstrap's mixins

Core variables and mixins

Reset and dependencies

Core CSS styles

Components

Utility classes

Dissecting Bootstrap's theme mixins

Utilities

Components

Skins

Layout

Customizing our download

Changing the values in our download

Developing a workflow for using Bootstrap

Summary

11. Abstracting CSS Frameworks with Less

...