LESS CSS

This page is not intended to teach you the LESS CSS language. Instead, this page explains using LESS CSS on ImpressPages. If you are not familiar with LESS, please refer to official LESS page, and then return to this article.

If you don't like LESS, you are not forced to use it. ImpressPages works nice with old and well known CSS. However, LESS is worth trying as it offers great flexibility for style tweaking.

Automatic compilation

ImpressPages automatically compiles *.less files in Theme/YourTheme/assets directory to corresponding css files if both of the following conditions are met:

developmentEnvironment constant in config.php is set to 1
theme.less file modification date is later than theme.css file's date.

assets/less subdirectory

You can break down a large less file into a few smaller files. In such case, put these files to your theme's assets/less subdirectory and add @import rules to theme.less file, as shown in the example below:

@import 'less/sample1.less'; 
@import 'less/sample2.less';
@import 'less/sample3.less';

ImpressPages will check for any changes in less directory, and recompile root less file, if necessary.

Theme options and LESS

All theme option values are automatically available in LESS as variables. It is fine to have the same variables, manually defined in your LESS files. Then you will be able to use your own preview tools, IDE suggestions, etc. Besides, during the compilation ImpressPages will override the default variable values with the ones set in the theme.