Learning Less.js

Creating the initial framework

Once you've made the decision to convert in order to use Less, there are a few steps that we can take, which help with the initial conversion process, before we start writing Less code.

Let's take a look at how we can make this process easier. For the purpose of this example, I'll assume that you have just one style sheet, called styles.css, and that you're working in a development environment on a simple HTML-based site in order to get accustomed to the conversion process.

1. Start by renaming the sitestyles.css file with a .less extension to sitestyles.less.
2. In a new file in your text editor, add the following:

   @import "sitestyles.less";

3. Save this as styles.less. In your HTML code, change the existing link to sitestyles.css ...