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.
- Misc functions
- String functions
- List functions
- Math functions
- Type functions
Description
The Less misc functions consists of the following group functions, they are:
Description
The string is used to represent the color.
Framework: string: a string to the specified color.
Returns: color
Example
color( “#FFFFFF”);
Result
#FFFFFF
Description
Used to get the image dimensions from a file.
Framework: string: the file to get the image dimensions.
Returns: dimension
Example
image-size (“file.png”);
Result
10px 10px
Description
Used to get the image height from the file.
Framework: string: the file to get the image dimensions for.
Returns: dimension
Example
image-height (“file.png”);
Result
10px
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.
- length: m, cm, mm, in, pt and pc
- time: s and ms
- angle: rad, deg, grad and turn
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;
}
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.
Framework:
url: inline the file URL.
mimetype: it is a MIME type string.
Example
data-uri (‘../data/image.jpg’);
Result
url (‘data: image/jpeg;base64,hbhasdyhHdrtdyGCtDYuUF==’);
Output in browser
url (‘.../data/image.jpg’);
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;
}
Description
Used to change or remove the dimension units. The absolute units such as inches, centimeters, points etc. are supported by Less.
Framework:
dimension: defines a number with or without a dimension.
unit: it removes or changes the unit (optional).
Example 1
unit (7, px)
Result
7px
Example 2
unit (8em)
Result
8
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.
Framework:
numbers: for a number with or without units.
Example 1
get-unit (6px)
Result
px
Example 2
get-unit(5)
Result
//nothing
Description
The svg-gradient function generates multi-stop svg gradients.
The directions are followed by two or more color stops. Each color specified stops in separate argument and can be supplied inside a list.
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
- to bottom
- to right
- to bottom right
- to top right
- ellipse
- ellipse at center
The directions are followed by two or more color stops. Each color specified stops in separate argument and can be supplied inside a list.
Framework: colors stop in list.
- list of identifiers or escaped value: It is used to set the direction.
- list: It lists the position of all colors.
Framework: color stops in arguments.
- list of identifiers or escaped: it is used to set the direction.
- Color [percentage] pair: first color and its relative position (position optional).
- Color percent pair: second color (color optional) and its relative position.
This repeats up to the last color.
Returns: url with “URI-ENCODED” svg gradient.
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.
Description
The following are a few string functions supported by Less.
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 =.
Framework:
string:Iit is a string used to escape.
Returns:
The string escaped content without quotes.
Example
escape (‘x=1’)
Result
a%3D1
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.
Framework:
string: It is a string to escape.
Returns:
String: The string escaped content without quotes.
Example
filter: e(“ms:Welcome to SPLessons!!!”);
Result
filter: ms:Welcome to SPLessons!!!;
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: &nbsp;“myvalues: 5 myfile: &nbsp;“ mydir/less_demo.less “ ”;
Description
Used to replace a text within a string. The following are some of the parameters used to replace string function.
string:The string is used to search and replace within.
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.
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.
- Length
- Extract
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. |
@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 |
Key Points
- Each less function has its own framework.
- The less functions are fully documented and used for different operations.