Learning Less.js
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Choosing an IDE or editor

We need to start somewhere, and what better place than an editor. After all, we can't produce anything if we don't have something that we can use to write it! Editing Less files is very easy—they are plain text files, which can be edited in almost any editor.

The downside is that there are dozens of editors available, either free or at a cost. However, there are some editors that have support for Less either included by default or available as an add-on package, which includes the following:

There are more editors available; you can see a complete list of editors available at http://lesscss.org/usage/#editors-and-plugins.

Note

You might have noticed that I have not mentioned IDEs such as Dreamweaver. While these will work perfectly well with Less files, their method of working can affect the experience of learning how to write Less code effectively.

In the meantime, let's take a look at installing my personal favorite, which is Sublime Text 2.

Installing Sublime Text 2

Sublime Text is a shareware cross-platform text editor, which is available at http://www.sublimetext.com. Its popularity stems from an uncluttered interface that allows for easy editing, yet is equally powerful. Sublime Text comes with a Python-based API, for which you can write plugins.

To install Sublime Text, we can download it from Windows; please download and install the version that is appropriate to your platform, accepting all defaults.

Note

The next version of Sublime Text, Version 3, is available at the time of writing this at http://www.sublimetext.com/3; it is in beta at present but is reasonably stable for use if you don't mind working with beta software!

Adding Less syntax support

Next, we need to add syntax support for Less, which requires several steps—the first of which is to install Package Control Manager, which is required in order to install plugins for Sublime Text. Let's begin by browsing to the installation page of the Package Control website at https://sublime.wbond.net/installation#st2.

We need to copy the code shown in the Sublime Text 2 tab, and then open Sublime Text 2. Once it is open, click on View and Show Console before pasting the code into the console. Press Enter to run the installation. Once you see the following appear in the Console window, restart Sublime Text:

We now need to install syntax support for Less. For this, you will need an Internet connection, so you might not find it possible to do this while commuting, for example!

Assuming you have access to the Internet, go ahead and press Ctrl + Shift + P to bring up Package Manager, then type in Package Control: Install Package, and press Enter, as shown in the following screenshot:

There will be a short delay while Package Manager retrieves the latest list of packages that are available; you can monitor their progress in the status bar.

Once this is retrieved, the package list will be presented; in the package name box, enter LESS, as shown in the following screenshot, and press Enter:

Sublime Text will now install the package. There will be a delay while it is installed; we can monitor its progress in the status bar at the bottom of the window. Once this is completed, you will see Line 1, Column 1; Package LESS successfully installed appear in the status bar. Syntax support is now installed—if we open up a test Less file in Sublime Text (such as buttons.less, from Chapter 4, Working with Variables, Mixins, and Functions, in the accompanying code download for this book), we can see that the code is now in color and not in black and white as before:

At this point, we're ready to start editing Less files—we still have some more tools we need to look at, though, before we have a complete toolkit! Once we've produced a Less file, we need to compile it into a valid CSS, so let's take a look at some of the tools that are available for this purpose.

上一章目录下一章