In the previous section, we looked at how you can use Less to dynamically generate your compiled stylesheet from within your site. This may not suit everyone's needs. In this recipe, and the next, we will see some alternatives that allow us to precompile our CSS styles, so we can then include the finished results on our site.
For this recipe we're going to use the open source application WinLESS to compile a LESS file into a normal CSS stylesheet. You can download a copy of the program from http://www.winless.org. You will also need your favorite text editor. We're going to create a typical .less file; while the format may not make much sense just yet, all will be explained later in this book.
- Open up the text editor of your choice, and add in the following lines; save it as
testprecompile.lessin the folder you created from the Installing LESS section:.border-radius(@radius: 3px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .box-shadow(@x : 2px, @y : 2px, @blur : 5px, @spread : 0, @color : rgba(0,0,0,.6)) { -webkit-box-shadow: @x @y @blur @spread @color; -moz-box-shadow: @x @y @blur @spread @color; box-shadow: @x @y @blur @spread @color; } div { @color: green; background: @color; width: 300px; height: 300px; margin: 30px auto; .border-radius(10px); .box-shadow(); } - Double-click on the
WinLess_1.5.3.msifile you downloaded to install it, accept all defaults, and double-click on it to open the application. - Click on the Add folder button, and select the folder you created in the first step, and click on OK to add it to the folder list of WinLess. Click on the Refresh folder button to update the list on the right-hand side as shown in the following screenshot:
- Click on Compile to generate the CSS file; if you open the resulting CSS file, you will see the generated code as follows:
div { background: #008000; width: 300px; height: 300px; margin: 30px auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.6); -moz-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.6); box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.6); } - As you make further changes to the
.lessfile, WinLess will automatically update the CSS file for you; it will remain in the same folder as the.lessfile, until you are ready to use it in a production environment.
WinLess is GUI front-ends to the command-line version of LESS, lessc.cmd. The GUI takes the content of the .less file, parses it, and gives a .css file as the output with the compiled CSS styles. WinLess includes an option to maintain a list of files that it will automatically monitor, so that when any are changed, it will automatically update the contents of the equivalent CSS file with the appropriate changes.
A number of people have used lessc.cmd to create GUI front-ends to help simplify the compilation process. They are available either as open source applications, or on a commercial license, and for a mix of different platforms.
If you don't need all of the bells and whistles of WinLESS, then you may prefer to use the open source application SimpLESS, which is available for Windows, Linux, or Mac OSX, from http://wearekiss.com/simpless. SimpLESS is designed to be run from the system tray, and will automatically generate or update any CSS file silently, without prompting. If you prefer, you can also drag-and-drop files into the application manually as shown in the following screenshot:
If you need an application which can work across different platforms independently, you may want to try LESS Parser, which is available at http://www.proving-ground.be/less/. This was developed using Adobe Air for Windows 7 but should work on any platform that supports Adobe Air. It's still in development, so there may be some bugs when using on a non-Windows platform:
Another application that works in a similar manner is Crunch!. This is an open source software, and available from http://www.crunchapp.net. This will watch which folders you select, as well as edit both the source .LESS and compiled .css files within the same application:
If you prefer, you can use an online converter, which will achieve the same result, such as the one available at http://winless.org/online-less-compiler.
You may also prefer to compile your code on server side; this will be particularly useful if you have an existing development process, and don't want to introduce yet another application into your workflow mix. Let's now take a look at how you can compile your Less code using a server-side based process as part of the next task.