Difference between revisions of "LESS"

Jump to: navigation, search
m (moved Recess to LESS: better name)
(The bootstrapbase theme)
 
(49 intermediate revisions by 14 users not shown)
Line 1: Line 1:
== About Recess ==
+
== Overview ==
Recess is a tool used to compile and compress LESS into CSS under *nix based systems.
 
  
== About the bootstrap theme ==
+
LESS ([http://lesscss.org 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.
In Moodle, the styles for the boostrap theme are written using LESS, which is compiled into CSS. The main LESS file is theme/bootstrap/less/moodle.less, while additional files are stored in theme/bootstrap/less/moodle/ and imported by the main file. Following the instructions for using Recess below, you will be able to compile the LESS code into a single CSS file which will be stored in theme/bootstrap/style/.
 
  
It is extremely important that developers do not edit the bootstrap CSS file directly, as it can be replaced at any time with a newly compiled version. It is much safer to alter the LESS code, ensuring that your changes are kept after each compile.
+
Browsers don't interpret it themselves, however, so LESS files need to be converted into normal CSS before use.
  
== Installing Recess under Ubuntu ==
+
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 following commands should be run to install Recess
 
  
<pre>
+
== The bootstrapbase theme ==
sudo apt-get install npm node
 
npm install recess -g
 
</pre>
 
  
== Installing Recess under Mac OS X using MacPorts ==
+
Moodle's bootstrapbase theme has rules written using LESS.
1) Install MacPorts on Mac OS X. If you use a different package manager some install commands will vary.
 
2) Install NPM
 
<pre>
 
    port install npm
 
    rehash
 
</pre>
 
3) Download https://github.com/twitter/recess/archive/master.zip and unzip it, then cd into the directory.
 
4) Install recess
 
<pre>
 
    npm install recess -g
 
    rehash
 
</pre>
 
  
== Using Recess ==
+
The main LESS file is '''theme/bootstrapbase/less/moodle.less''', with additional files  in '''theme/bootstrapbase/less/moodle/''' imported by the main file.
  
To compile to LESS for the boostrap theme use these commands, from the root of your Moodle code directory
+
After compiling the LESS files, CSS ends up in '''theme/bootstrapbase/style/moodle.css'''. This file should not be edited manually.
<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.
+
== 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).
  
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.
+
After editing the LESS files, compile (minified) your CSS using '''grunt''' as follows:
  
[[Category:Developer tools]]
+
<code bash>
 +
$ grunt css
 +
</code>
 +
 
 +
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 ==
 +
* [[Grunt]]
 +
 
 +
[[Category:Themes]]

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