Requests for comment/LESS

This document proposes adopting LESS as a stylesheet language in core. LESS is a stylesheet language that compiles into CSS. LESS is a superset of CSS: any valid CSS code is also valid LESS. LESS extends CSS with variables, mixins, operations, and functions. These abstractions provide a means for writing concise and well-factored stylesheets that derive the styling of individual interface components from a core set of definitions.

Code samples
As an example, let's use LESS to refactor some actual CSS code in core:

The first thing we'll do is use LESS's ability to concisely express inheritance and cascade by nesting selectors:

If you look closely at the rules for  and , you'll notice that they use a common pattern of setting a background color on an input element and declaring a one-pixel border on that element that is painted a slightly darker shade of that color (12.5% darker, to be exact). LESS allows us to express this pattern as a mixin. At their most basic, mixins are simply a shorthand for a group of CSS rules that go together. More sophisticated mixins can take parameters:

We might also notice that the colors used to style the valid & invalid input boxes form two-thirds of a triadic color scheme. (Triadic color schemes consist of three colors that are equidistant from each other on the color wheel.) LESS allows us to assign these colors human-readable names and gives us functions we can use to derive harmonious color themes from a base color:

Because we'd like to build up a library of generic style components, we defined our mixin and variables in. To use these definitions in, we use the   directive. The final result looks like this:

Why use LESS?
LESS is one the most popular and stable CSS preprocessors.

LESS vs. Sass
LESS versus Sass, or any other preprocessor, is kind of a bikeshed, so we wish to avoid a large discussion here. Suffice it to say that both are very good CSS preprocessors with similar syntaxes,, active communities supporting them, and a robust feature set. In fact, we've used Sass in MediaWiki core before, in the mediawiki.ui resource library. We're also currently using LESS as well, in Extension:MobileFrontend. In the long run, we want to standardize on one preprocessor to use, especially since the styles generated by each of these right now are very similar.