LESS: Difference between revisions
Jason Fowler (talk | contribs) |
|||
Line 28: | Line 28: | ||
==== Installing Recess under Mac OS X using MacPorts ==== | ==== Installing Recess under Mac OS X using MacPorts ==== | ||
1. Install | 1. Install the basic node packages from the web site: [http://nodejs.org http://nodejs.org] (or use your favourite package manager). | ||
2. | 2. On the command line, install recess like this: | ||
<pre> | <pre> | ||
npm install recess -g | npm install recess -g | ||
</pre> | </pre> | ||
==== Using Recess ==== | ==== Using Recess ==== |
Revision as of 04:00, 12 April 2013
Overview
LESS 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 under Mac OS X using MacPorts
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
To compile to LESS for the boostrap theme use these commands, from the root of your Moodle code directory
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.