Difference between revisions of "LESS"

Jump to: navigation, search
(Using Recess)
(The bootstrapbase theme)
 
(31 intermediate revisions by 12 users not shown)
Line 7: Line 7:
 
Recess is one tool used to compile and compress LESS into CSS under *nix based systems.  There are [https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js many others tools for LESS].
 
Recess is one tool used to compile and compress LESS into CSS under *nix based systems.  There are [https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js many others tools for LESS].
  
== The bootstrap theme ==
+
== The bootstrapbase theme ==
  
Moodle's bootstrap base theme has rules written using LESS.
+
Moodle's bootstrapbase 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.  
+
The main LESS file is '''theme/bootstrapbase/less/moodle.less''', with additional files  in '''theme/bootstrapbase/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.
+
After compiling the LESS files, CSS ends up in '''theme/bootstrapbase/style/moodle.css'''.  This file should not be edited manually.
  
== Compilers ==
+
== Compiling LESS  ==
 +
If you want to make changes to the .css generated from these .less files then you need to use a less compiler to build your changes. The supported way to achieve this
 +
is using '''grunt'''. (See [[Grunt]] for details of how to install it).
  
 +
After editing the LESS files, compile (minified) your CSS using '''grunt''' as follows:
  
=== Recess ===
+
<code bash>
==== Installing Recess under Ubuntu ====
+
$ grunt css
The following commands should be run to install Recess
+
</code>
  
<pre>
+
This will compile and compress the moodle.less & editor.less file (and all the LESS and CSS files it imports) into a single file, moodle.css & editor.css, and store it in the style folder of the bootstrapbase theme.
sudo apt-get install npm node
 
npm install recess -g
 
</pre>
 
  
==== Installing Recess on Mac OS X ====
+
== See also ==
1. Install the basic node packages from the web site: [http://nodejs.org http://nodejs.org]   (or use your favourite package manager to install <code>node</code> and <code>npm</code>).
+
* [[Grunt]]
  
2. On the command line, install recess like this:
+
[[Category:Themes]]
<pre>
 
    npm install recess -g
 
</pre>
 
 
 
==== Using Recess ====
 
 
 
After editing the LESS files, compile your CSS as follows:
 
 
 
<pre>
 
cd theme/boostrap/less/
 
recess --compile --compress moodle.less > ../style/generated.css
 
</pre>
 
 
 
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 <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.
 
 
 
=== WinLess ===
 
Download [http://winless.org/ 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.
 
 
 
[[Category:Developer tools]]
 

Latest revision as of 07:12, 1 December 2016

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 bootstrapbase theme

Moodle's bootstrapbase theme has rules written using LESS.

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

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

Compiling LESS

If you want to make changes to the .css generated from these .less files then you need to use a less compiler to build your changes. The supported way to achieve this is using grunt. (See Grunt for details of how to install it).

After editing the LESS files, compile (minified) your CSS using grunt as follows:

$ grunt css

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

See also