Less function

Miscellaneous functions

color

Parse the color, converting the string representing the color to a color value.

Parameter: string: a string of the specified color.

Return value: color

Example: color (# “aaa”);

Output: #aaa

convert

To convert a number from one unit to another.

The first argument is a numeric value with a unit, and the second argument is a unit. If the units of the two parameters are compatible, the units of the number are converted. If the units of two arguments are incompatible, the first argument is returned as is.

See unit To change units without conversion

Compatible units are:

Length: m, cm, mm, in, pt and PC, time: s and MS, Angle: rad, DEg, grad and turn. Parameters:

Number: a floating point number with units. identifier, string or escaped Value: units Return value: number

convert(9s."ms")
convert(14cm, mm)
convert(8, mm) // incompatible unit types
Copy the code
9000ms
140mm
8
Copy the code

data-url

Inline resources, and if the ieCompat option is enabled and the resource is too large, or if you use the function in your browser, fall back to the URL (). If no MIME type is provided, the node uses the MIME package to determine the correct MIME type.

Parameters:

  • mimetype: (Optional) A MIME type string.
  • url: The URL of the file to inline.

Example: data – a uri (‘.. /data/image.jpg’);

Url (‘data:image/jpeg; base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==’);

Output from the browser: URL (‘.. /data/image.jpg’);

Example: data – a uri (‘ image/jpeg. base64’, ‘.. /data/image.jpg’);

Url (‘data:image/jpeg; base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==’);

default

The default function returns true only if it is available within the protection condition and does not match any other mixin, otherwise false. When used outside of a mixin Guard condition, the default function is interpreted as regular CSS.

.mixin(1) {
    x: 11;
}
.mixin(2) {
    y: 22;
}
.mixin(@x) when (default()) {
    z: @x;
}

div {
    .mixin(3); //3 There is no return value
}

div.special {
    .mixin(1); / / 11
}
Copy the code

The output

div {
    z: 3;
}
div.special {
    x: 11;
}
Copy the code

Less list function

length

It takes a comma – or space-separated list of values as arguments and returns an integer representing the number of elements in the list.

	@colors:'# 111'.'# 112';
	@val:length(@colors);
Copy the code

extract

It returns the value of the specified location in the list.

   @colors:'# 111'.'# 112';
   @val:extract(@colors.2); / / 1 beginning
Copy the code

Less string function

escape

It encodes strings or information by using URL encoding for special characters. You cannot encode some characters, such as,, /,? @, & amp; +, ~,! , $, ‘and some characters you can encode, such as \, #, > ^, (,), {,}, : >, > ], [and =.

escape("Hello!! welcome to Tutorialspoint!" )Copy the code

The output

Hello%21%21%20welcome%20to%20Tutorialspoint%21
Copy the code

e

It is a string function that takes a string as an argument and returns unquoted information. It is a CSS escape that takes ~ “something” escaped values and numbers as arguments. === ~(‘value’)

filter: e("Hello!! welcome to Tutorialspoint!" );Copy the code

The output

filter: Hello!! welcome to Tutorialspoint! ;Copy the code

% format

This function formats a string. It can be written in the following format:

% (string, the arguments...).Copy the code

The first argument is a string with a placeholder. All placeholders begin with the percentage symbol %, followed by the letter S, S, D, D, A or A.

The remaining parameters contain expressions to replace placeholders. If you need to print a percentage sign, please add a percentage %%. If you need to escape special characters into UTF-8 escape codes, use uppercase placeholders. This function escapes () ‘~! Except for all special characters. The space code is % 20. Lowercase placeholders are left as special characters.

Placeholder:

  • D, d, a, a – can be replaced with any type of argument (color, number, escape value, expression, etc.). If you use them with strings, the entire string is used – including its quotes. However, the quotes are placed in the string as is and cannot be escaped with “/” or similar symbols.
  • S, s – can be replaced by any expression. If it is used with strings, only string values are used – leaving out quotes.

Parameters: String: format string with placeholder, any * : value that replaces the placeholder. Returns: formatted string. eg:

format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");
Copy the code

The output

  format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";
Copy the code

replace

It is used to replace text in a string. It takes a few arguments:

  • String: It searches for strings and replaces them.

  • Pattern: It searches for regular expression patterns.

  • Replacement: This replaces the string that matches the pattern.

  • Flags: These are optional regular expression flags.

replace("Hello, Mars?" , "Mars\?" , "Earth!" ); replace("One + one = 4", "one", "2", "gi"); replace('This is a string.', "(string)\.$", "new $1."); replace(~"bar-1", '1', '2');Copy the code

The output

"Hello, Earth!" ; "2 + 2 = 4"; 'This is a new string.'; bar-2;Copy the code

Mathematical function

percentage

Converts a floating point number to a percentage string.

Parameters: number -a floating point number. Returns: string Example: percentage(0.5) Output: 50%Copy the code

percentage

Converts a floating point number to a percentage string.

Parameters: number -a floating point number. Returns: string Example: percentage(0.5) Output: 50%Copy the code

ceil

Round up to the next largest integer.

Parameters: number - a floating point number.

Returns: integer

Example: ceil(2.4)

Output: 3
Copy the code

floor

Round down to the next minimum integer.

Parameters: number -a floating point number. Returns: INTEGER Example: floor(2.6) Output: 2Copy the code

There are other mathematical functions that I’m not going to talk about. Let’s see, APIS are not commonly used

The type function

name eg
isnumber isnumber(56px); / / true; isnumber(#ff0); // false
isstring isstring(#ff0); / / false; isstring(“string”); // true
iscolor
iskeyword
isurl
ispixel ispixel(56px); // true
isem isem(56px); / / false; Isem (7.8 em); // true
ispercentage Ispercentage (7.8%); // true
Isunit (Returns true if the value is numeric in the specified unit, false otherwise.) isunit(11px, px); // true
Isruleset (Returns true if the value is a ruleset, false otherwise.)

Color definition function

The color definition functions in LESS make it super easy to define and manipulate colors. Using color functions can help you control colors and match them better.

LESS provides a number of useful color functions to change and manipulate colors in different ways. LESS supports color definition functions, as shown in the following table:

  1. rgb

It creates colors from red, green and blue values. It takes the following parameters: Red: Contains integers between 0 and 255 or percentages between 0 and 100%. Green: It contains integers between 0 and 255 or percentages between 0 and 100%. Blue: Contains integers between 0 and 255 or percentages between 0 and 100%.

RGB (220,20,60) = = = = # dc143c >

  1. rgba

Alpha: It contains numbers between 0 and 1 or percentages between 0 and 100%.

Rgba (220,20,60,0.5) = = = > rgba (220,20,60,0.5)

  1. argb

It defines the hexadecimal representation of colors in the #AARRGGBB format. It takes the following arguments: color: It specifies the color object.

,23,31,0.5 argb (rgba (176)) = = = > b0171f # 80

  1. hsl

It generates colors based on hue, saturation and brightness values. It takes the following parameters:

  • Hue: An integer ranging from 0 to 360, indicating degrees.
  • Saturation: It contains numbers between 0 and 1 or percentages between 0 and 100%.
  • Brightness: It contains numbers between 0 and 1 or percentages between 0 and 100%.

An HSL (120100%, 50%) = = = > # 00 ff00

  1. hsla

Alpha: It contains numbers between 0 and 1 or percentages between 0 and 100%.

Hsla (0,100%, 50%, 0.5)===> rgba(255,0,0,0.5);

  1. hsv

It produces color based on hue, saturation and value. It contains the following parameters:

Hue: An integer ranging from 0 to 360, indicating degrees.

Saturation: It contains numbers between 0 and 1 or percentages between 0 and 100%.

Value: It contains a number between 0 and 1 or a percentage between 0 and 100%.

HSV (80,90%, 70%) It converts color objects with HSV values to: # 7DB312

  1. hsva

It produces the color from hue, saturation, value and alpha values. It uses following parameters:

  • Hue: An integer ranging from 0 to 360, indicating degrees.

  • Saturation: It contains numbers between 0 and 1 or percentages between 0 and 100%.

  • Value: It contains a number between 0 and 1 or a percentage between 0 and 100%.

  • Alpha: It contains numbers between 0 and 1 or percentages between 0 and 100%.

Hsva (80,90%, 70%,0.6) it specifies a color object with hsva value as: rgba(125,179,18,0.6)

api

  • w3c_api
  • lesscss_api