What Is LESS?

LESS is a dynamic style sheet language that extends CSS through the addition of variables, mixins, operations and nested rules.

Variables: Reusable common values, such as color and style information.
Mixins: Properties from existing styles that you use inside new styles.
Operations: Mathematical creation and manipulation of CSS properties.
Nested rules: CSS selectors placed inside of other CSS selectors.

LESS is also referred to as a CSS preprocessor because you can write style sheets in the extended LESS language first, and then compile them into plain CSS. LESS is open-source and you can run it on the client-side or server-side, or compile it and output it as plain CSS.

For downloads, detailed documentation, and resources, see the LESS web site: http://lesscss.org.

Using LESS

You can use LESS from the command line, download it as a JS file for in-browser use, or use a third party application.

Command line

You can find specific instructions and a list of command-line prompts on the LESS web site under Command Line Usage.

In-browser

Download a copy of less.js and save it.
Create a style sheet and save it using the .less file extension instead of the usual .css extension.
Add the following code within the <head> element of your HTML page:

<link rel="stylesheet/less" href="styles.less">
<script src="less.js"></script>

Note: In the link element, you must replace the typical rel="stylesheet" with rel="stylesheet/less" in order for LESS to compile in the browser. LESS style sheets must come before the LESS script.

When the page loads, less.js processes and compiles your LESS code live in the browser. While this is a convenient way to start developing with LESS, it is not recommended in production environments where performance is important.

Third party applications

It is advisable to compile LESS into plain CSS for production environments. If you want something more than the command line prompts offer, a wide array of third party tools is available. The LESS web site has a list of compilers and editors for various platforms and IDEs. See Online LESS Compilers.

Customizing Variables

We built Wijmo 5 themes with LESS and make the source files available along with their compiled CSS counterparts. You can update existing themes and create new ones using the provided files.

The Wijmo 5 themes have this file naming structure: wijmo.theme.ThemeName.css. To update a theme using LESS, find the corresponding wijmo.theme.ThemeName.less file, modify it, and re-compile it using one of the methods listed above.

Every theme is built upon a base set of colors and style options. We declare variables for these common values that we reuse throughout the theme. Note that LESS variables start with the @ symbol.

@background: #f3f3f3;
@header: #54443b;
@primary: #2780ec;
@text: #26211f;
@button: #5f534c;
@tool-tip: #e5d9cf;
@grid-cell-border: true;
@grid-right-side-col: none;
@border-radius: 4px;
@background-grad: false;
@button-grad: false;
@header-grad: false;

In addition to base variables, we use import statements to include additional LESS files to use as mixins. These contain color functions, style mixins, and mixin guards.

@import "mixins/color-functions";
@import "mixins/guards";
@import "mixins/styles";
@import "mixins/chart";

The color functions generate a wider pallet of additional colors based on the initial colors selected and the mixin guards are designed to ensure contrast. The mixin guards evaluate colors based on their lightness and write CSS accordingly: If an area's background color is greater than 50% in lightness, the text in that area renders in a darker color, and vice versa.

Creating New Themes

You can create new themes by duplicating an existing theme and then modifying the base set of colors and style options. Here is a key to the color and style variables.

@background - Background color for the control.
@header - Background color for control headers (e.g. FlexGrid, FlexChart).
@primary - Primary accent color used throughout the theme.
@text - Default text color.
@button - Background color for buttons.
@tool-tip - Background color for tooltips.
@border-radius - Global border radius setting for all controls.
@grid-cell-border - Toggle for FlexGrid cell borders. Set to 'false' to turn off all grid borders.
@grid-left-side-col - Background color for the FlexGrid's row header cells (same as @header by default).
@background-grad - Toggle for control background color gradient. Set to 'true' to add a gradient.
@button-grad - Toggle for button background color gradient. Set to 'true' to add a gradient.
@header-grad - Toggle for header background color gradient. Set to 'true' to add a gradient.

Deploying New Themes

Once you create a new theme and output it as plain CSS, place it in the styles directory and include it in your project. Now you can link to it from any HTML page that contains Wijmo 5 controls.

<link href="styles/NewTheme.css" rel="stylesheet">