Less CSS - SPLessons

Chapter 13

Less Functions

Less Functions

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

Description
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.

Functions

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

Color

Description
The string is used to represent the color.

Example 

color( “#FFFFFF”);

Result 

#FFFFFF

image-size

Description
Used to get the image dimensions from a file.
Example 

image-size (“file.png”);

Result 

10px 10px

image-height

Description
Used to get the image height from the file.

Example 

image-height (“file.png”);

Convert

Description
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.

Example
Below example explains the simple snippet code.

 style.less

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

Compile the code to generate the following CSS code.

style.css

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

data-uri

Description
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.

Example 

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

Result 

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

Output in browser

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

default

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

Create a simple less file as shown below.

style.less

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

Compile the above code using the command

lessc style.less style.css

Result
style.css

div {
z: 3;
}

div.special {
x: 15;
}

unit

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

Example 1 

unit (7, px)

Example 2 

unit (8em)

get-unit

Description
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.

Example 1 

get-unit (6px)

Example 2 

get-unit(5)

Result 

//nothing

svg-gradient

Description
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.

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

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

Svg_gradient.hmtl

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

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

style.less

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

body{
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.css

.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';
}

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

Description
The following are a few string functions supported by Less.

escape

Description
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 =.

Example 

escape (‘x=1’)

Result 

a%3D1

e

Description
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.

Example 

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

Result 

filter: ms:Welcome to SPLessons!!!;

% format

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

” %( string, arguments …) “.

Example 

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

Result 

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

replace

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

Example 

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

Result 

“Welcome, to SPLessons!”

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

The following are the functions used in List function.


Table

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
ceil:
It rounds up the next highest integer.		 ceil(2.4) 3
floor:
It rounds down to the next lowest integer.		 floor(2.6) 2
percentage:
It converts a floating point number into a percentage string.		 percentage(0.5) 50%
round:
Applies rounding for a floating point number.		 round(1.67) 2
sqrt:
It is used to calculate square root of a number and keeps until they exist.		 sqrt(25cm) 5cm
abs:
The absolute value of a number is calculated and keep units until it exist.		 abs(25cm) 25cm
sin:
Radians are assumed on numbers without units.		 sin(1deg); 0.01745240643728351;
asin:
It calculate arcsine functions(inverse of sine),which returns the numbers in radians.
e.g. the numbers between -π/2 and π/2		 asin(1)
asin(-0.8414709848078965)		 1.5707963267948966
-1rad
cos:
It calculate the cosine function for a specified value and assumes radians on numbers without units.		 cos(1) 0.5403023058681398
acos:
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
tan:
The tangent function of a number is calculated and the radians assumed on numbers without units.		 tan(1) 1.5574077246549023
atan:
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
pi:
Used to return the π (pi) value.		 pi() 3.141592653589793
pow:
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
mod:
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)		 NaNcm;
1;
min:
Calculate and return one or more lowest values of argument.		 min(5 , 10) 5
max:
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
isnumber:
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
isstring:
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
iscolor:
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
iskeyword:
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
isurl:
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
ispixel:
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
isem:
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
ispercentage:
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
isunit:
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
isruleset:
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

Summary

Key Points

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

Updated On : 09/05/2016