Dotless & website settings

If you want to add variables, mixins, functions, and so forth to your CSS projects, Dynamicweb contains an implementation of the dotless project, which is set up to automatically compile all item-based website settings to a .less variable file, which is then converted to clean, minified css.

The first time a website is saved, a .config file is generated inside the /Files/Templates folder with the name Less_1.config, where 1 is the website ID.

This configuration file contains instructions for dotless – here a configuration file for Dynamicweb Rapido:

The nodes should contain:

• DesignName contains the name of the design folder. If a layout is set on the website when it is saved for the first time, this will be auto-filled. Left blank, the less compiler will not run at all – which can be useful.
• MInification controls whether the auto-generated CSS should be minified or not – set to either true or false
• LessFilesFolder should contain the root folder where you place your project .less files – menu.less, header.less, footer.less, etc.
• VariableFiles should contain a comma separated list of paths to the less files containing the variables used in the design-specific .less files – menu.less, etc.
• OutputPath should contain the path to where you want the compiled min.css file – e.g. Files/Templates/Designs/YourProject/css/
• UseCleanVariableNaming is set to true for new solutions, and results in prettier variable names (e.g. without "-" as the first character)

Once the nodes are properly configured, a file called _variables_[areaid].auto.less is generated in the LessFilesFolder whenever a website is saved – the variables in that file can then be used inside your design-specific .less files, which are compiled to a min.css file in the folder defined in the OutputPath node from the config file.

To use the variables, simply include min.css in your master template.

If something goes wrong, you can find an error log in Files/System/Log/LessCompiler – this folder will be generated when the first error occurs.

To use the same configuration across several websites, create a configuration file called less.config. When a new website or language layer is added, appropriately named .config files will be generated from this template.

Variable names are generated based on the item type field system name – following these rules:

• If a capital letter is encountered at the beginning of a work, it is replaced by the lowercase letter
• If a capital letter is encountered inside a system name, it is replaced by a dash and the lowercase letter

For example; GoogleFont becomes google-font, and LayoutWidth becomes layout-width.