Less CSS - SPLessons

Chapter 13

Less Functions

Less Functions

This chapter explains about Less functions, its types and uses.

The  operations like string manipulation and transform colors can be done using Less Functions. Less provides variety of functions and are fully documented in the function reference.

The following are a few of Less Functions.


The Less misc functions consists of the following group functions, they are:


The string is used to represent the color.

color( “#FFFFFF”);



Used to get the image dimensions from a file.

image-size (“file.png”);

10px 10px


Used to get the image height from the file.

image-height (“file.png”);


Used to convert numbers from one unit to another unit.

Suppose when the first argument contains a number with units and the second argument contains only units. The number is converted only if the units are compatible, if not the argument is returned as unmodified.

The following are the compatible unit groups.

Below example explains the simple snippet code.


meter: convert( 20cm, mm);
time: convert(4s, “ms”);
no-unit: convert(6, mm);

Compile the code to generate the following CSS code.


meter: 200mm;
time: 4000ms;
no-unit: 6;


The term uri stands for uniform resource identifier (URI). The data-uri is used to inline a resource in a web page. It is a MIME type string, node uses the mime package to determine the correct mime type when not given.

data-uri (‘../data/image.jpg’);

url (‘data: image/jpeg;base64,hbhasdyhHdrtdyGCtDYuUF==’);

Output in browser

 url (‘.../data/image.jpg’);


The default function available in the guard condition returns true and does not match with any other mixins. If it matches,  it returns false.
Below example explains the misc default function in Less.

Create a simple less file as shown below.


mixin(1)                    {x: 15}
.mixin(2)                   {y: 20}
.mixin(@x) when (default()) {z: @x}
div {
div.special {

Compile the above code using the command

lessc style.less style.css


div {
z: 3;

div.special {
x: 15;


Used to change or remove the dimension units. The absolute units such as inches, centimeters, points etc. are supported by Less.

unit (7, px)

unit (8em)


This function is used to return units of a number. When the argument contains a number with unit, it returns units. If argument does not contain a unit, it returns an empty value.

get-unit (6px)




The svg-gradient function generates multi-stop svg gradients.

To generate multi-stop gradient, the function must have 3 parameters. One parameter indicates the gradient type and its direction. The rest two parameters specify the colors and positions.

The positions of first and last colors are optional and the remaining colors must have a specified position.

Set the directions like

The directions are followed by two or more color stops. Each color specified stops in separate argument and can be supplied inside a list.

Below example explains the svg-gradient in Less misc functions.

Create a simple html file in Nodejs folder as shown below.


<link rel="stylesheet" href="style.css" type="text/css" />
<div class="style">
<h2>Welcome to SPLessons</h2>
<p>the best tutorial site.</p>

Create a simple less file in the same Node js folder as shown below.


.style {
@style: white, blue 100%, #DAA520;
background-image: svg-gradient(ellipse, @style);

text-align: center;
font-family: 'lato';

Compile the above less code in command prompt using the below command.

lessc style.less style.css

By compiling the code, it automatically generates the following CSS code.


.style {

background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3CradialGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2275%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230000ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23daa520%22%2F%3E%3C%2FradialGradient%3E%3Crect%20x%3D%22-50%22%20y%3D%22-50%22%20width%3D%22101%22%20height%3D%22101%22%20fill%3D%22url(%23gradient)%22%20%2F%3E%3C%2Fsvg%3E');

body {
text-align: center;
font-family: 'lato';

After making all the required changes, you need to run the html file in a browser to get the following output.

The following are a few string functions supported by Less.


escape apply URL-encoding to special characters, which are found in the input string.

Some of the characters which are not encoded are:

/, ? , @ , , , & , + , ‘ , ~ , ! and $.

The most common characters that are encoded are.

\<space\> , # , ^ , ( , ) , { , } , | , : , > , < , ; , ] , [ and =.

escape (‘x=1’)



It uses string as a parameter and returns the content without quotes and “e” string function is a CSS escaping, replaced with ~”some content” syntax.

filter: e(“ms:Welcome to SPLessons!!!”);

filter: ms:Welcome to SPLessons!!!;

% format

The function is used to format a string and written in the format as shown below.

” %( string, arguments …) “.

Formate- a - d: %(“myvalues: %a myfile: %d”, 3 + 3 , “ mydir/less_demo.less”);

Formate- a - d: &amp;nbsp;“myvalues: 5 myfile: &amp;nbsp;“ mydir/less_demo.less “ ”;


Used to replace a text within a string. The following are some of the parameters used to replace string function.

replace (“ Welcome, val?” , “val\?” , “to SPLessons! “);

“Welcome, to SPLessons!”

The List function defines the length and the position of the value in the list.

The following are the functions used in List function.

Functions Framework Example Result
Length Defines comma or space separated list of values. @list: “book”, “pencil”, “pen”;

n: length(@list);

n: 3;
extract extract is used to return the value at a specified position in a list.

List– define a comma or space separated by list of values.
Index– returns an integer, which specifies a position of list elements.

@list: Book, Pen, Pencil;

Value: extract (@list, 2);

value: pen;

The Math Functions are used to perform numeric operations like square root, modules, and percentages.

The following are a few math functions in Less.

Functions Example Result
It rounds up the next highest integer.
ceil(2.4) 3
It rounds down to the next lowest integer.
floor(2.6) 2
It converts a floating point number into a percentage string.
percentage(0.5) 50%
Applies rounding for a floating point number.
round(1.67) 2
It is used to calculate square root of a number and keeps until they exist.
sqrt(25cm) 5cm
The absolute value of a number is calculated and keep units until it exist.
abs(25cm) 25cm
Radians are assumed on numbers without units.
sin(1deg); 0.01745240643728351;
It calculate arcsine functions(inverse of sine),which returns the numbers in radians.
e.g. the numbers between -π/2 and π/2
It calculate the cosine function for a specified value and assumes radians on numbers without units.
cos(1) 0.5403023058681398
The arccosine function (inverse of cosine) is calculated and returns the number in radians.
e.g. a number between 0 and π
acos(0.5403023058681398) 1rad
The tangent function of a number is calculated and the radians assumed on numbers without units.
tan(1) 1.5574077246549023
The arctangent function (inverse of tangent) is calculated and returns the number in radians.
e.g. a number between -π/2 and π/2
atan(-1.5574077246549023) -1rad
Used to return the π (pi) value.
pi() 3.141592653589793
Calculate and return the value of the first argument raised to the power of the second argument and the returned value is same as the first parameter, whereas the second parameter is ignored.
pow(25, -2) 0.0016
The function calculates and return the values of the first argument modulus with the second argument and also handle the negative floating points.
mod(0cm ,0px)
mod(7 , 3)
Calculate and return one or more lowest values of argument.
min(5 , 10) 5
Calculate and return one or more highest values of argument.
max(5 , 10); 10

The Type functions are used to specify the type of the value and following are some type of  functions used in Less.

Functions Example
The function returns true if a value is number
and false if not a number.
isnumber(#fff); // false
isnumber(red); // false
isnumber(“string”); // false
isnumber(4321); // true
isnumber(86px); // true
isnumber(9.7%); // true
isnumber(keyword); // false
isnumber(url(…)); // false
The function returns true if the value is string
and false if not a string.
isstring(#fff); // false
isstring(red); // false
isstring(“string”); // true
isstring(4321); // false
isstring(86px); // false
isstring(9.7%); // false
isstring(keyword); // false
isstring(url(…)); // false
The function returns true if the value is a color
and false if not a color.
iscolor(#fff); // true
iscolor(red); // true
iscolor(“string”); // false
iscolor(4321); // false
iscolor(86px); // false
iscolor(9.7%); // false
iscolor(keyword); // false
iscolor(url(…)); // false
The function returns true if the value is a keyword
and false if not a keyword.
iskeyword(#fff); // false
iskeyword(red); // false
iskeyword(“string”); // false
iskeyword(4321); // false
iskeyword(86px); // false
iskeyword(9.7%); // false
iskeyword(keyword); // true
iskeyword(url(…)); // false
The function returns true if the value is url
and false if not a url.
isurl(#fff); // false
isurl(red); // false
isurl(“string”); // false
isurl(4321); // false
isurl(86px); // false
isurl(9.7%); // false
isurl(keyword); // false
isurl(url(…)); // true
The fucntion returns true if the value is pixel
and false if not a pixel
ispixel(#fff); // false
ispixel(red); // false
ispixel(“string”); // false
ispixel(3421); // false
ispixel(86px); // true
ispixel(9.7%); // false
ispixel(keyword); // false
ispixel(url(…)); // false
The fucntion returns true if the value is em
and false is not a em.
isem(#fff); // false
isem(red); // false
isem(“string”); // false
isem(4321); // false
isem(86px); // false
isem(9.7em); // true
isem(keyword); // false
isem(url(…)); // false
The function returns true if the value is percentage
and false if not a percentage.
ispercentage(#fff); // false
ispercentage(red); // false
ispercentage(“string”); // false
ispercentage(4321); // false
ispercentage(86px); // false
ispercentage(9.7%); // true
ispercentage(keyword); // false
ispercentage(url(…)); // false
The function returns true if the value is a number in particular unit
and false if not a unit.
isunit(15px, px); // true
isunit(4.2%, px); // false
isunit(55px, rem); // false
isunit(8rem, rem); // true
isunit(86px, “%”); // false
isunit(9.7%, ‘%’); // true
isunit(4321, em); // false
isunit(#fff, pt); // false
isunit(“mm”, mm); // false
The functions returns true if the value is a ruleset
and false if not a ruleset
@rules: {
color: blue;
}isruleset(@rules); // true
isruleset(#fff); // false
isruleset(red); // false
isruleset(“string”); // false
isruleset(4321); // false
isruleset(86px); // false
isruleset(9.7%); // false
isruleset(keyword); // false
isruleset(url(…)); // false


  • Each less function has its own framework.
  • The less functions are fully documented and used for different operations.