Less

Wiki stylesheets can quickly become too large to easily maintain. They can contain anything and everything from skin customisations to template styles to username highlights. This may be worsened for some wikis which do not use Common.css by default, as opposed to the normal two used in every other MediaWiki skin. This script seeks to make your wiki's CSS that little bit easier to maintain.
LESS is a dynamic stylesheet language. Its many features, such as variables, mixins and nesting, exist to make your CSS easier to maintain. With it, you can make your stylesheets shorter and easier to follow. It's very similar to the SASS stylesheets used by Fandom themselves, but LESS allows us to compile the stylesheet with JavaScript, making this script possible.
A demonstration of this script can be found at MediaWiki:Custom-Less/test.less and MediaWiki:Custom-Less/test.css.
== ==
You will also need to configure the installation.
You can also add some extra optional configuration that will be shared across every target page. Again, this must come before your importArticles statement:
If you want to use the defaults simply remove this optional configuration, or the option you don't want to change if you only want to change part of it.
== ==
Firstly, you need to create the pages referenced in your configuration: target and source. As an example, MediaWiki:Common.css is our target page, which will be updated with the parsed LESS, and MediaWiki:Custom-common.less is our source page, which contains the LESS to parse.
One of the best features of LESS is that it allows you to split up a large CSS file into several smaller, more easily maintainable files. To take advantage of this, we might set up our source file to look something like this:
As you can see the example source page here is really a series of imports referencing a number of other LESS files found on subpages of our source page. This setup isn't required but may help keep your CSS more manageable. If you want, you don't have to use imports and can keep all your LESS on the source page. Note, the imports, source and target page must be on the same wiki—you can't import CSS from other wikis, although it may be supported in the future.
Next, you can create a page which will be added to the compiled CSS page as a header comment. This is optional, but if you do not use it, you must remove the option from your configuration; if it is in your configuration but the page does not exist, it will cause an error.
This is the only comment that will be found on the page, as the comments on the original files are very unlikely to match up to the compiled CSS and are thus removed to reduce confusion. The page should be a CSS comment, such as:
Lastly, we need to check our load array, set in the configuration. Note, this will not load on a source or target page automatically so you will need to explicitly declare the pages you want an update button on. If your source page is a series of imports, you might want to set it to load on the imported pages as well, so when you are finished editing them you can simply update the page they're used on with a single click.
The main configuration is an array, meaning you can have multiple source and target pairs, say MediaWiki:Common.css and MediaWiki:Custom-common.less. However, make sure pages in the load array are only used once as only one button will load regardless of how many times it's referenced. This is because of the generic nature of the text on the update button. More than one update button per page may be supported in the future.
== ==
After you've set everything up, you're now ready to start using the script! To start, navigate to any page you've set to load the update CSS button on. You'll see a button labelled "Update CSS" near the edit button. If the button isn't appearing, check your configuration.
After clicking the button an interface will pop up. This will keep you updated on how the updating is going and notify you of most errors encountered. If it discovers a page that doesn't exist or encounters an error when parsing the content of your LESS files, it will output the error and a link to the problem page.
On rare occasions, the update process will stop and no error will be output to the interface. Firstly, try reloading the page and trying again. If you have this problem repeatedly, please report the page(s) you see it on and how far into the update process you get on the talk page.
== Extra features ==
* Standard mixins, documented at Less/mixins
* Integration with Colors, which provides the following theme designer values:
** @theme-body - which corresponds to the colour of the wiki's background (behind any background image)
** @theme-buttons - which corresponds to the background colour of the wiki's buttons and local wiki navigation
** @theme-header - which corresponds to the background colour of the wiki's global navigation and collapsible footer bar
** @theme-links - which corresponds the the colour of the links on the wiki
** @theme-page - which corresponds the the colour of the page background
** @theme-contrast - which corresponds to the colour of text used in the wiki's buttons
** @theme-text - which corresponds to the colour of text used in the wiki's content area
** @theme-gradient - which is a secondary colour to be used in conjunction with @theme-buttons to create gradients
** @theme-border - which corresponds to the colour of border elements
* Other helpful variables:
** @filepath - which can be used to generate the file path of an image, e.g. background-image:url('@{filepath}/filename.jpg');.
* Formats indentation and newlines in the resulting CSS for consistency
== FAQ ==
; Do I need to learn LESS to use this script?
* No! Valid CSS is valid LESS. If you don't want to use LESS for whatever reason, you can use this to split up your CSS files as well.
; Where can I learn LESS?
* A guide to LESS can be found here.
== Changelog ==
This only documents major updates, so may not correlate with the latest update in the infobox.
;13th June 2018
* Added i18n-js integration to make translating easier.
;18th November 2016
* Added @filepath variable.
;3rd November 2016
* Integrated Colors into the script, providing more variables relating to a wiki's theme.
;18th July 2015
* Fixed bug that caused duplicated messages to be output to the GUI.
; 12th December 2014
* Upgraded less source to v2.1.1.
; 31st July 2014
* Fixed various problems with error reporting.
; 23rd July 2014
* Version 2 released
** Adds support for importing LESS files with @import
** Reworked i18n support
** Added standard mixins
** Added some theme designer values for use in stylesheets
** Added the option to wrap the CSS in pre tags
; 29th March 2014
* Script released
== @import behaviour ==
The following is notes on what less.js does when it encounters various @import statements
== Known bugs ==
* Use of calc() produces incorrect results (this is a bug in the less.js parser).
** calc( 100% + 2px ) results in calc(102%) when parsed. To get around this bug, use ~"calc( 100% + 2px )" which parses to calc(100% + 2px).
== Planned future updates ==
: These may be subject to change and have no release schedule associated with them. If you would like to request something that isn't listed here, please do so on the talk page.
* Add support for importing LESS files from other Fandom wikis. Importing files from other MediaWiki installations, e.g. https://www.mediawiki.org, is not planned.
** Syntax might be something like u:dev:PAGENAME.less which is converted to a proper URL before importing.
** This is currently possible using ResourceLoader /load.php?debug=false&lang=en&mode=articles&articles=u:c:MediaWiki:Foo.css&only=styles but long strings in code are ugly, so this should be handled internally so we can simply do @import 'u:c:MediaWiki:Foo.css';
*** Requires testing to discover what happens when importing other dependencies though this method.
* Add more standard mixins similar to those used by Fandom for things like button colour gradients, etc.
* Add other theme-designer values
* Add support for more than one update CSS button per page
* Integrate the ace editor for syntax highlighting and linting as you type, similar to the codeeditor extension found on Wikimedia wikis
** Source code found at github:ajaxorg/ace, with LESS support at 1 and 2.
** Possibly try to extend Fandom's code editor (which uses Ace as well).
* Add a small API for testing new ideas/debugging
** LESS -> CSS, enable/disable mixins, sassparams, etc.
** Use to test changes before saving, similar to Scribunto's error saving thing.
* Show diff (for approval) before submitting update
** Also show diff as the default preview ("Preview as CSS") when editing (move normal preview to the dropdown and rename "preview as text")