LESS: Difference between revisions
No edit summary |
Mary Evans 2 (talk | contribs) (Installing Recess under Windows7) |
||
Line 37: | Line 37: | ||
npm install recess -g | npm install recess -g | ||
</pre> | </pre> | ||
==== Installing Recess under Windows7 ==== | |||
In order to install Recess you need to have Node.js installed first, which is relatively simple to do. | |||
==Install Node.js== | |||
These instructions are for Windows 7 64 bit. | |||
Go to nodejs.org click install. | |||
When installed go to -> Start -> All Programs -> type Node.js into the Search box, then select Node.js Command prompt (black icon) from the list. Now you are ready to install Recess. So at the command lin promt tyle the following: | |||
<pre> | |||
1. npm install recess -g | |||
</pre> | |||
<code>npm</code> stands for Node Package Manager, and is the equivalent of apt-get for node.js packages. | |||
==== Using Recess ==== | ==== Using Recess ==== | ||
Line 50: | Line 68: | ||
NOTE: if you are getting empty generated.css files, this is being caused by a parsing error in your LESS code. A bug in <code>recess</code> currently prevents it giving you helpful error messages in many cases. You will need to examine what you have altered or written to make sure it is complete and the syntax is correct. The <code>lessc</code> compiler is what is used by <code>recess</code> to do the actual compiling and will have been installed automatically along with it. If you call it directly as <code>lessc moodle.less</code> it should give you a helpful error message that points you to where the problem is. | NOTE: if you are getting empty generated.css files, this is being caused by a parsing error in your LESS code. A bug in <code>recess</code> currently prevents it giving you helpful error messages in many cases. You will need to examine what you have altered or written to make sure it is complete and the syntax is correct. The <code>lessc</code> compiler is what is used by <code>recess</code> to do the actual compiling and will have been installed automatically along with it. If you call it directly as <code>lessc moodle.less</code> it should give you a helpful error message that points you to where the problem is. | ||
Revision as of 01:22, 23 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
1. sudo apt-get install npm node (if the above fails due to the error "The following packages have unmet dependencies", run the commands separately, ie. sudo apt-get install npm and then sudo apt-get install node) 2. npm install recess -g
npm
stands for Node Package Manager, and is the equivalent of apt-get for node.js packages.
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 to install node
and npm
).
2. On the command line, install recess like this:
npm install recess -g
Installing Recess under Windows7
In order to install Recess you need to have Node.js installed first, which is relatively simple to do.
Install Node.js
These instructions are for Windows 7 64 bit.
Go to nodejs.org click install.
When installed go to -> Start -> All Programs -> type Node.js into the Search box, then select Node.js Command prompt (black icon) from the list. Now you are ready to install Recess. So at the command lin promt tyle the following:
1. npm install recess -g
npm
stands for Node Package Manager, and is the equivalent of apt-get for node.js packages.
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. A bug in recess
currently prevents it giving you helpful error messages in many cases. You will need to examine what you have altered or written to make sure it is complete and the syntax is correct. The lessc
compiler is what is used by recess
to do the actual compiling and will have been installed automatically along with it. If you call it directly as lessc moodle.less
it should give you a helpful error message that points you to where the problem is.