The following are a few of Less Functions.
Returns: color
color( “#FFFFFF”);
#FFFFFF
Framework: string: the file to get the image dimensions.
Returns: dimension
image-size (“file.png”);
10px 10px
Returns: dimension
image-height (“file.png”);
10px
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.
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; }
url: inline the file URL.
mimetype: it is a MIME type string.
data-uri (‘../data/image.jpg’);
url (‘data: image/jpeg;base64,hbhasdyhHdrtdyGCtDYuUF==’);
Output in browser
url (‘.../data/image.jpg’);
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
div { z: 3; } div.special { x: 15; }
dimension: defines a number with or without a dimension.
unit: it removes or changes the unit (optional).
unit (7, px)
7px
unit (8em)
8
numbers: for a number with or without units.
get-unit (6px)
px
get-unit(5)
//nothing
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
Framework: color stops in arguments.
This repeats up to the last color.
Returns: url with “URI-ENCODED” svg gradient.
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'; }
Some of the characters which are not encoded are:
/, ? , @ , , , & , + , ‘ , ~ , ! and $.
The most common characters that are encoded are.
\<space\> , # , ^ , ( , ) , { , } , | , : , > , < , ; , ] , [ and =.
string:Iit is a string used to escape.
Returns:
The string escaped content without quotes.
escape (‘x=1’)
a%3D1
string: It is a string to escape.
Returns:
String: The string escaped content without quotes.
filter: e(“ms:Welcome to SPLessons!!!”);
filter: ms:Welcome to SPLessons!!!;
” %( string, arguments …) “.
Formate- a - d: %(“myvalues: %a myfile: %d”, 3 + 3 , “ mydir/less_demo.less”);
Formate- a - d: &nbsp;“myvalues: 5 myfile: &nbsp;“ mydir/less_demo.less “ ”;
pattern: used to search the regular expression pattern.
replacement: used to replace the string that matches the pattern.
flags: It is a regular expression flag and is optional.
replace (“ Welcome, val?” , “val\?” , “to SPLessons! “);
“Welcome, to SPLessons!”
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. |
@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 |