Less CSS - SPLessons
boy2

Chapter 13

Less Functions

Less CSS - SPLessons

Less Functions

shape Introduction

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

shape 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

shape Description

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

Color

shape Description

The string is used to represent the color.

shape Example 

color( “#FFFFFF”);

shape Result 

#FFFFFF

image-size

shape Description

Used to get the image dimensions from a file.

shape Example 

image-size (“file.png”);

shape Result 

10px 10px

image-height

shape Description

Used to get the image height from the file.

shape Example 

image-height (“file.png”);

shape Result 

10px

Convert

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

shape 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

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

shape Example 

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

shape Result 

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

Output in browser

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

default

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

shape 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

shape Result

style.css

div {
z: 3;
}

div.special {
x: 15;
}

unit

shape Description

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

shape Example 1 

unit (7, px)

shape Result 

7px

shape Example 2 

unit (8em)

shape Result 

8

get-unit

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

shape Example 1 

get-unit (6px)

shape Result 

px

shape Example 2 

get-unit(5)

shape Result 

//nothing

svg-gradient

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

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

shape Result

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

shape Description

The following are a few string functions supported by Less.

escape

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

shape Example 

escape (‘x=1’)

shape Result 

a%3D1

e

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

shape Example 

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

shape Result 

filter: ms:Welcome to SPLessons!!!;

% format

shape Description

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

” %( string, arguments …) “.

shape Example 

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

shape Result 

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

replace

shape Description

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

shape Example 

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

shape Result 

“Welcome, to SPLessons!”

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


shape 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

shape Key Points

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

Hide Index Show Index
Chapter 13