Book Image

Learning less.js

Book Image

Learning less.js

Overview of this book

Table of Contents (22 chapters)
Learning Less.js
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Working through a practical example


So far, we've looked at a range of tips and tricks that you can use to convert a site in order to use Less—while there are some useful tips, I think you will agree that it is far better to see the conversion process in action! With this in mind, let's take a look at a simple example, in the form of the CSS styling we created in Chapter 4, Working with Variables, Mixins, and Functions, for the one-page website.

Before we start making changes, let's take a look at the compiled CSS that was created for the page, along with a screenshot of the page:

Introducing the CSS

Now that we've seen a screenshot of the page that we're going to retrofit to use Less, let's take a look at the CSS code we need to convert. The compiled CSS that was generated using Crunch! is as follows—a copy of this is in the code download that accompanies this book, as conversion.css. We'll also include a slightly modified version of the styles from social.css, within conversion.css. This...