LESS: Difference between revisions
No edit summary |
|||
Line 16: | Line 16: | ||
== Compiling LESS == | == Compiling LESS == | ||
As a prerequisite, you need to have [[grunt]] installed to compile our less files since MDL-51582. | |||
After editing the LESS files, compile (minified) your CSS using [grunt] as follows: | After editing the LESS files, compile (minified) your CSS using [[grunt]] as follows: | ||
<code bash> | <code bash> |
Revision as of 16:35, 4 December 2015
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 Bootstrap base 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
As a prerequisite, you need to have grunt installed to compile our less files since MDL-51582.
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.