LESS: Difference between revisions
(Note about plan not to migrate this page to the new developer resources. See template for more info.) |
|||
| (49 intermediate revisions by 16 users not shown) | |||
| Line 1: | Line 1: | ||
{{Template:WillNotMigrate}} | |||
== Overview == | == 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. | 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. | ||
Browsers don't interpret it themselves, however, so LESS files need to be converted into normal CSS before use. | 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. | 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 | == The bootstrapbase theme == | ||
Moodle's | Moodle's bootstrapbase theme has rules written using LESS. | ||
The main LESS file is '''theme/ | 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/ | After compiling the LESS files, CSS ends up in '''theme/bootstrapbase/style/moodle.css'''. This file should not be edited manually. | ||
== | == Compiling LESS == | ||
The | 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: | |||
= | <syntaxhighlight lang="bash"> | ||
$ grunt css | |||
</syntaxhighlight> | |||
</ | |||
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]] | |||
[[Category: | |||
Latest revision as of 13:43, 24 June 2022
| Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable. |
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.
