Less CSS - SPLessons

Less Programatic Use

Home > Lesson > Chapter 19
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Less Programatic Use

Less Programatic Use

shape Introduction

This chapter explains about Less programmatic use, options for Less Programmatic use and how to get access to the log.

shape Description

The less.render function is the main entry point into less. The below format explains the less.render function in less. [c] less.render(lessInput, options) .then(function(output) { // output.css = string of css // output.map = string of sourcemap // output.imports = array of string filenames of the imports referenced }, function(error) { }); // or... less.render(css, options, function(error, output) {})[/c] Here, the options argument is optional. So, when a call back is not specified a promise will be given, if specified a promise will not be given. Whenever the call back version is used, the Less synchronously is used under the hood. To render a file, first read it into string i.e. to pass into less.render and should set the file name same as the main file name. In this way, Less handles all the processing of imports.

Options

shape Description

The sub sourceMap options can be set using the option sourceMap, which is an object. Some of available options are. [c] less.render(lessInput) .then(function(output) { // output.css = string of css // output.map = undefined } //, less.render(lessInput, {sourceMap: {}}) .then(function(output) { // output.css = string of css // output.map = string of sourcemap } //or, less.render(lessInput, {sourceMap: {sourceMapFileInline: true}}) .then(function(output) { // output.css = string of css \n /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJ..= */ // output.map = undefined }[/c] Earlier, it was recommended to create a less.Parser and then calling CSS for result, which is a serious drawback.

Getting Access to the Log

shape Description

A log listener can be added with the following code. [c] less.logger.addListener({ debug: function(msg) { }, info: function(msg) { }, warn: function(msg) { }, error: function(msg) { } });[/c] The error will not be logged but instead passed back to promise in less.render and all the functions are optional.

Summary

shape Key Points

  • The less.render function is considered as the main entry point in less.
  • The object sourcemap is used to define an option.