Difference between revisions of "LESS"

Jump to: navigation, search
Line 52: Line 52:
  
 
==== Using WinLess ====
 
==== Using WinLess ====
1. Click the Add folder button.
+
1. Click the '''Add folder''' button.
  
2. Select theme\bootstrap\less\ as the folder to add.
+
2. Select '''theme\bootstrap\less\''' as the folder to add.
  
 
3. Deselect all the LESS files by ticking, then unticking the tick box up in the column header.
 
3. Deselect all the LESS files by ticking, then unticking the tick box up in the column header.
  
4. Select moodle.less from the list by ticking the checkbox beside it.
+
4. Select '''moodle.less''' from the list by ticking the checkbox beside it.
  
5. Right click on the moodle.less row and click "Select output file".
+
5. Right click on the '''moodle.less''' row and click '''Select output file'''.
  
6. Browse to theme\bootstrap\style\ and select generated.css as the output file.
+
6. Browse to '''theme\bootstrap\style\''' and select generated.css as the output file.
  
7. Click the Compile button.
+
7. Click the '''Compile''' button.
  
8. Swap to the Compiler tab to check the result of the process.
+
8. Swap to the '''Compiler''' tab to check the result of the process.
  
 
[[Category:Developer tools]]
 
[[Category:Developer tools]]

Revision as of 04:06, 12 April 2013

Overview

LESS (lesscss.org) extends CSS with dynamic behavior such as variables, mixins, operations and functions. It's an advanced way of writing CSS that we use in some themes within Moodle.

Browsers don't interpret it themselves, however, so LESS files need to be converted into normal CSS before use.

Recess is one tool used to compile and compress LESS into CSS under *nix based systems. There are many others tools for LESS.

The bootstrap theme

Moodle's bootstrap base theme has rules written using LESS.

The main LESS file is theme/bootstrap/less/moodle.less, with additional files in theme/bootstrap/less/moodle/ imported by the main file.

After compiling the LESS files, CSS ends up in theme/bootstrap/style/generated.css. This file should not be edited manually.

Compilers

Recess

Installing Recess under Ubuntu

The following commands should be run to install Recess

sudo apt-get install npm node
npm install recess -g

Installing Recess on Mac OS X

1. Install the basic node packages from the web site: http://nodejs.org (or use your favourite package manager).

2. On the command line, install recess like this:

    npm install recess -g

Using Recess

After editing the LESS files, compile your CSS as follows:

cd theme/boostrap/less/
recess --compile --compress moodle.less > ../style/generated.css

This will compile and compress the moodle.less file (and all the LESS and CSS files it imports) into a single file, generated.css, and store it in the style folder of the bootstrap theme.

NOTE: if you are getting empty generated.css files, this is being caused by a parsing error in your LESS code. You will need to examine what you have altered or written to make sure it is complete and the syntax is correct.

WinLess

Download WinLess and install it.

Using WinLess

1. Click the Add folder button.

2. Select theme\bootstrap\less\ as the folder to add.

3. Deselect all the LESS files by ticking, then unticking the tick box up in the column header.

4. Select moodle.less from the list by ticking the checkbox beside it.

5. Right click on the moodle.less row and click Select output file.

6. Browse to theme\bootstrap\style\ and select generated.css as the output file.

7. Click the Compile button.

8. Swap to the Compiler tab to check the result of the process.