Hex Parameter Assignment Of Rents

Edit the markdown source for "misc-functions"

color

Parses a color, so a string representing a color becomes a color.

Parameters: : a string of the specified color.

Returns:

Example:

Output:

image-size

Gets the image dimensions from a file.

Parameters: : the file to get the dimensions for.

Returns:

Example:

Output:

Note: this function needs to be implemented by each environment. It is currently only available in the node environment.

Added in: v2.2.0

image-width

Gets the image width from a file.

Parameters: : the file to get the dimensions for.

Returns:

Example:

Output:

Note: this function needs to be implemented by each environment. It is currently only available in the node environment.

Added in: v2.2.0

image-height

Gets the image height from a file.

Parameters: : the file to get the dimensions for.

Returns:

Example:

Output:

Note: this function needs to be implemented by each environment. It is currently only available in the node environment.

Added in: v2.2.0

convert

Convert a number from one unit into another.

The first argument contains a number with units and second argument contains units. If the units are compatible, the number is converted. If they are not compatible, the first argument is returned unmodified.

See unit for changing the unit without conversion.

Compatible unit groups:

  • lengths: , , , , and ,
  • time: and ,
  • angle: , , and .

Parameters:

  • : a floating point number with units.
  • , or : units

Returns:

Example:

Output:

data-uri

Inlines a resource and falls back to if the ieCompat option is on and the resource is too large, or if you use the function in the browser. If the MIME type is not given then node uses the mime package to determine the correct mime type.

Parameters:

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

If there is no mimetype, data-uri function guesses it from filename suffix. Text and svg files are encoded as utf-8 and anything else is encoded as base64.

If user provided mimetype, the function uses base64 if mimetype argument ends with ;base64. For example, is encoded into base64 while is encoded into utf-8.

Example:

Output:

Output in browser:

Example:

Output:

Example:

Output:

default

Available only inside guard conditions and returns only if no other mixin matches, otherwise.

Example:

Output:

It is possible to use the value returned by with guard operators. For example will match only if there's at least one more mixin definition that matches call:

result:

It is allowed to make multiple calls in the same guard condition or in a different conditions of a mixins with the same name:

However Less will throw a error if it detects a potential conflict between multiple mixin definitions using :

In above example it is impossible to determine what value each call should return since they recursively depend on each other.

Advanced multiple usage:

Result:

The function is available as a Less built-in function only inside guard expressions. If used outside of a mixin guard condition it is interpreted as a regular CSS value:

Example:

Result:

unit

Remove or change the unit of a dimension

Parameters:

  • : A number, with or without a dimension.
  • : (Optional) the unit to change to, or if omitted it will remove the unit.

See convert for changing the unit with conversion.

Example:

Output:

Example:

Output:

get-unit

Returns units of a number.

If the argument contains a number with units, the function returns its units. The argument without units results in an empty return value.

Parameters:

  • : a number with or without units.

Example:

Output:

Example:

Output:

svg-gradient

Generates multi-stop svg gradients.

Svg-gradient function generates multi-stop svg gradients. It must have at least three parameters. First parameter specifies gradient type and direction and remaining parameters list colors and their positions. The position of first and last specified color are optional, remaining colors must have positions specified.

The direction must be one of , , , , or . The direction can be specified as both escaped value and space separated list of words .

The direction must be followed by two or more color stops. They can be supplied either inside a list or you can specify each color stops in separate argument.

Parameters - colors stops in list:

  • or : direction
  • - all colors and their positions in list

Parameters - color stops in arguments:

  • or : direction
  • pair: first color and its relative position (position is optional)
  • pair: (optional) second color and its relative position
  • ...
  • pair: (optional) n-th color and its relative position
  • pair: last color and its relative position (position is optional)

Returns: with "URI-Encoded" svg gradient.

Example - colors stops in list:

equivalent - color stops in arguments:

both result in:

Note: in versions before 2.2.0 the result is encoded .

Generated background image has red color on the left, green at 30% of its width and ends with a blue color. Base64 encoded part contains following svg-gradient:

if

Returns one of two values depending on a condition.

Parameters:

  • : A boolean expression
  • : A value returned if is true.
  • : A value returned if is not true.

Released: v3.00

Examples:

Result:

Notes: A boolean expression supported as the parameter are the same as of Guard Statements. Note however that any boolean expression for the parameter require an extra set of parens:

The only operators that can be w/o parens are: , and :


There's a relatively new way of doing transparency, it's called HEXA (HEX + Alpha). It takes in 8 digits instead of 6. The last pair is Alpha. So the pattern of pairs is #RRGGBBAA. Having 4 digits also works: #RGBA

I am not sure about its browser support for now but, you can check the DRAFT Docs for more information.

§ 4.2. The RGB hexadecimal notations: #RRGGBB

The syntax of a is a token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, "#", followed by some number of digits or letters (the case of the letters doesn’t matter - is identical to ).

8 digits

The first 6 digits are interpreted identically to the 6-digit notation. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where represents a fully transparent color and represent a fully opaque color.

Example 3
In other words, represents the same color as (a slightly-transparent blue).

4 digits

This is a shorter variant of the 8-digit notation, "expanded" in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where represents the minimum value and represents the maximum. The next three digits represent the green, blue, and alpha channels, respectively.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *