Less 函数手册

Extracts the saturation channel of a color object in the HSV color space.

Parameters: color – a color object.

Returns: percentage 0-100

Example: hsvsaturation(hsv(90, 100%, 50%))

Output: 100%

hsvvalue

Extracts the value channel of a color object in the HSV color space.

Parameters: color – a color object.

Returns: percentage 0-100

Example: hsvvalue(hsv(90, 100%, 50%))

Output: 50%

red

Extracts the red channel of a color object.

Parameters: color – a color object.

Returns: float 0-255

Example: red(rgb(10, 20, 30))

Output: 10

green

Extracts the green channel of a color object.

Parameters: color – a color object.

Returns: float 0-255

Example: green(rgb(10, 20, 30))

Output: 20

blue

Extracts the blue channel of a color object.

Parameters: color – a color object.

Returns: float 0-255

Example: blue(rgb(10, 20, 30))

Output: 30

alpha

Extracts the alpha channel of a color object.

Parameters: color – a color object.

Returns: float 0-1

Example: alpha(rgba(10, 20, 30, 0.5))

Output: 0.5

luma

Calculates the luma (perceptual brightness) of a color object.

Uses SMPTE C / Rec. 709 coefficients, as recommended in WCAG 2.0. This calculation is also used in the contrast function.

Before v1.7.0 the luma was calculated without gamma correction, use the luminance function to calculate these “old” values.

Parameters: color – a color object.

Returns: percentage 0-100%

Example: luma(rgb(100, 200, 30))

Output: 44%

luminance

Calculates the value of the luma without gamma correction (this function was named luma before v1.7.0)

Parameters: color – a color object.

Returns: percentage 0-100%

Example: luminance(rgb(100, 200, 30))

Output: 65%

Edit the markdown source for “color-operations” Color operations generally take parameters in the same units as the values they are changing, and percentages are handled as absolutes, so increasing a 10% value by 10% results in 20%. Set the option method parameter to relative for relative percentages. When using relative percentages increasing a 10% value by 10% results in 11%. Values are clamped to their allowed ranges; they do not wrap around. Where return values are shown, we’ve used formats that make it clear what each function has done, in addition to the hex versions that you will usually be be working with.

saturate

Increase the saturation of a color in the HSL color space by an absolute amount.

Parameters:

• color: A color object.
• amount: A percentage 0-100%.
• method: Optional, set to relative for the adjustment to be relative to the current value.

Returns: color

Example: saturate(hsl(90, 80%, 50%), 20%)

Output: #80ff00 // hsl(90, 100%, 50%)

 ➜ 

desaturate

Decrease the saturation of a color in the HSL color space by an absolute amount.

Parameters:

• color: A color object.
• amount: A percentage 0-100%.
• method: Optional, set to relative for the adjustment to be relative to the current value.

Returns: color

Example: desaturate(hsl(90, 80%, 50%), 20%)

Output: #80cc33 // hsl(90, 60%, 50%)

 ➜ 

lighten

Increase the lightness of a color in the HSL color space by an absolute amount.

Parameters:

• color: A color object.
• amount: A percentage 0-100%.
• method: Optional, set to relative for the adjustment to be relative to the current value.

Returns: color

Example: lighten(hsl(90, 80%, 50%), 20%)

Output: #b3f075 // hsl(90, 80%, 70%)

 ➜ 

darken

Decrease the lightness of a color in the HSL color space by an absolute amount.

Parameters:

• color: A color object.
• amount: A percentage 0-100%.
• method: Optional, set to relative for the adjustment to be relative to the current value.

Returns: color

Example: darken(hsl(90, 80%, 50%), 20%)

Output: #4d8a0f // hsl(90, 80%, 30%)

 ➜ 

fadein

Decrease the transparency (or increase the opacity) of a color, making it more opaque.

Has no effect on opaque colors. To fade in the other direction use fadeout.

Parameters:

• color: A color object.
• amount: A percentage 0-100%.
• method: Optional, set to relative for the adjustment to be relative to the current value.

Returns: color

Example: fadein(hsla(90, 90%, 50%, 0.5), 10%)

Output: rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout

Increase the transparency (or decrease the opacity) of a color, making it less opaque. To fade in the other direction use fadein.

Parameters:

• color: A color object.
• amount: A percentage 0-100%.
• method: Optional, set to relative for the adjustment to be relative to the current value.

Returns: color

Example: fadeout(hsla(90, 90%, 50%, 0.5), 10%)

Output: rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)

fade

Set the absolute opacity of a color. Can be applied to colors whether they already have an opacity value or not.

Parameters:

• color: A color object.
• amount: A percentage 0-100%.

Returns: color

Example: fade(hsl(90, 90%, 50%), 10%)

Output: rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

spin

Rotate the hue angle of a color in either direction.

While the angle range is 0-360, it applies a mod 360 operation, so you can pass in much larger (or negative) values and they will wrap around e.g. angles of 360 and 720 will produce the same result. Note that colors are passed through an RGB conversion, which doesn’t retain hue value for greys (because hue has no meaning when there is no saturation), so make sure you apply functions in a way that preserves hue, for example don’t do this:

@c: saturate(spin(#aaaaaa, 10), 10%);

Do this instead:

@c: spin(saturate(#aaaaaa, 10%), 10);

Colors are always returned as RGB values, so applying spin to a grey value will do nothing.

Parameters:

• color: A color object.
• angle: A number of degrees to rotate (+ or -).

Returns: color

Example:

spin(hsl(10, 90%, 50%), 30)
spin(hsl(10, 90%, 50%), -30)

Output:

#f2a60d // hsl(40, 90%, 50%)
#f20d59 // hsl(340, 90%, 50%)

 ➜ 

 ➜ 

mix

Mix two colors together in variable proportion. Opacity is included in the calculations.

Parameters:

• color1: A color object.
• color2: A color object.
• weight: Optional, a percentage balance point between the two colors, defaults to 50%.

Returns: color

Example:

mix(#ff0000, #0000ff, 50%)
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)

Output:

#800080
rgba(75, 25, 0, 0.75)

 +  ➜ 

tint

Mix color with white in variable proportion. It is the same as calling mix(#ffffff, @color, @weight)

Parameters:

• color: A color object.
• weight: Optional, a percentage balance point between color and white, defaults to 50%.

Returns: color

Example:

no-alpha: tint(#007fff, 50%); 
with-alpha: tint(rgba(00,0,255,0.5), 50%); 

Output:

no-alpha: #80bfff;
with-alpha: rgba(191, 191, 255, 0.75);

 ➜ 

shade

Mix color with black in variable proportion. It is the same as calling mix(#000000, @color, @weight)

Parameters:

• color: A color object.
• weight: Optional, a percentage balance point between color and black, defaults to 50%.

Returns: color

Example:

no-alpha: shade(#007fff, 50%); 
with-alpha: shade(rgba(00,0,255,0.5), 50%); 

Output:

no-alpha: #004080;
with-alpha: rgba(0, 0, 64, 0.75);

 ➜ 

greyscale

Remove all saturation from a color in the HSL color space; the same as calling desaturate(@color, 100%).

Because the saturation is not affected by hue, the resulting color mapping may be somewhat dull or muddy; luma may provide a better result as it extracts perceptual rather than linear brightness, for example greyscale('#0000ff') will return the same value as greyscale('#00ff00'), though they appear quite different in brightness to the human eye.

Parameters: color: A color object.

Returns: color

Example: greyscale(hsl(90, 90%, 50%))

Output: #808080 // hsl(90, 0%, 50%)

 ➜ 

Notice that the generated grey looks darker than the original green, even though its lightness value is the same.

Compare with using luma (usage is different because luma returns a single value, not a color):

@c: luma(hsl(90, 90%, 50%));
color: rgb(@c, @c, @c);

Output: #cacaca

 ➜ 

This time the grey’s lightness looks about the same as the green, though its value is actually higher.

contrast

Choose which of two colors provides the greatest contrast with another.

This is useful for ensuring that a color is readable against a background, which is also useful for accessibility compliance. This function works the same way as the contrast function in Compass for SASS. In accordance with WCAG 2.0, colors are compared using their gamma-corrected luma value, not their lightness.

The light and dark parameters can be supplied in either order – the function will calculate their luma values and assign light and dark automatically, which means you can’t use this function to select the least contrasting color by reversing the order.

Parameters:

• color: A color object to compare against.
• dark: optional – A designated dark color (defaults to black).
• light: optional – A designated light color (defaults to white).
• threshold: optional – A percentage 0-100% specifying where the transition from “dark” to “light” is (defaults to 43%, matching SASS). This is used to bias the contrast one way or another, for example to allow you to decide whether a 50% grey background should result in black or white text. You would generally set this lower for ‘lighter’ palettes, higher for ‘darker’ ones.

Returns: color

Example:

p {
    a: contrast(#bbbbbb);
    b: contrast(#222222, #101010);
    c: contrast(#222222, #101010, #dddddd);
    d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
    e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}

Output:

p {
    a: #000000 // black
    b: #ffffff // white
    c: #dddddd
    d: #000000 // black
    e: #ffffff // white
}

These examples use the above calculated colors for background and foreground; you can see that you never end up with white-on-white, nor black-on-black, though it’s possible to use the threshold to permit lower-contrast outcomes, as in the last example:

    

Edit the markdown source for “color-blending” 

These operations are similar (though not necessarily identical) to the blend modes found in image editors like Photoshop, Fireworks, or GIMP, so you can use them to make your CSS colors match your images.

multiply

Multiply two colors. Corresponding RGB channels from each of the two colors are multiplied together then divided by 255. The result is a darker color.

Parameters:

• color1: A color object.
• color2: A color object.

Returns: color

Examples:

multiply(#ff6600, #000000);

  

multiply(#ff6600, #333333);

  

multiply(#ff6600, #666666);

  

multiply(#ff6600, #999999);

  

multiply(#ff6600, #cccccc);

  

multiply(#ff6600, #ffffff);

  

multiply(#ff6600, #ff0000);

  

multiply(#ff6600, #00ff00);

  

multiply(#ff6600, #0000ff);

  

screen

Do the opposite of multiply. The result is a brighter color.

Parameters:

• color1: A color object.
• color2: A color object.

Returns: color

Example:

screen(#ff6600, #000000);

  

screen(#ff6600, #333333);

  

screen(#ff6600, #666666);

  

screen(#ff6600, #999999);

  

screen(#ff6600, #cccccc);

  

screen(#ff6600, #ffffff);

  

screen(#ff6600, #ff0000);

  

screen(#ff6600, #00ff00);

  

screen(#ff6600, #0000ff);

  

overlay

Combines the effects of both multiply and screen. Conditionally make light channels lighter and dark channels darker. Note: The results of the conditions are determined by the first color parameter.

Parameters:

• color1: A base color object. Also the determinant color to make the result lighter or darker.
• color2: A color object to overlay.

Returns: color

Example:

overlay(#ff6600, #000000);

  

overlay(#ff6600, #333333);

  

overlay(#ff6600, #666666);

  

overlay(#ff6600, #999999);

  

overlay(#ff6600, #cccccc);

  

overlay(#ff6600, #ffffff);

  

overlay(#ff6600, #ff0000);

  

overlay(#ff6600, #00ff00);

  

overlay(#ff6600, #0000ff);

  

softlight

Similar to overlay but avoids pure black resulting in pure black, and pure white resulting in pure white.

Parameters:

• color1: A color object to soft light another.
• color2: A color object to be soft lighten.

Returns: color

Example:

softlight(#ff6600, #000000);

  

softlight(#ff6600, #333333);

  

softlight(#ff6600, #666666);

  

softlight(#ff6600, #999999);

  

softlight(#ff6600, #cccccc);

  

softlight(#ff6600, #ffffff);

  

softlight(#ff6600, #ff0000);

  

softlight(#ff6600, #00ff00);

  

softlight(#ff6600, #0000ff);

  

hardlight

The same as overlay but with the color roles reversed.

Parameters:

• color1: A color object to overlay.
• color2: A base color object. Also the determinant color to make the result lighter or darker.

Returns: color

Example:

hardlight(#ff6600, #000000);

  

hardlight(#ff6600, #333333);

  

hardlight(#ff6600, #666666);

  

hardlight(#ff6600, #999999);

  

hardlight(#ff6600, #cccccc);

  

hardlight(#ff6600, #ffffff);

  

hardlight(#ff6600, #ff0000);

  

hardlight(#ff6600, #00ff00);

  

hardlight(#ff6600, #0000ff);

  

difference

Subtracts the second color from the first color on a channel-by-channel basis. Negative values are inverted. Subtracting black results in no change; subtracting white results in color inversion.

Parameters:

• color1: A color object to act as the minuend.
• color2: A color object to act as the subtrahend.

Returns: color

Example:

difference(#ff6600, #000000);

  

difference(#ff6600, #333333);

  

difference(#ff6600, #666666);

  

difference(#ff6600, #999999);

  

difference(#ff6600, #cccccc);

  

difference(#ff6600, #ffffff);

  

difference(#ff6600, #ff0000);

  

difference(#ff6600, #00ff00);

  

difference(#ff6600, #0000ff);

  

exclusion

A similar effect to difference with lower contrast.

Parameters:

• color1: A color object to act as the minuend.
• color2: A color object to act as the subtrahend.

Returns: color

Example:

exclusion(#ff6600, #000000);

  

exclusion(#ff6600, #333333);

  

exclusion(#ff6600, #666666);

  

exclusion(#ff6600, #999999);

  

exclusion(#ff6600, #cccccc);

  

exclusion(#ff6600, #ffffff);

  

exclusion(#ff6600, #ff0000);

  

exclusion(#ff6600, #00ff00);

  

exclusion(#ff6600, #0000ff);

  

average

Compute the average of two colors on a per-channel (RGB) basis.

Parameters:

• color1: A color object.
• color2: A color object.

Returns: color

Example:

average(#ff6600, #000000);

  

average(#ff6600, #333333);

  

average(#ff6600, #666666);

  

average(#ff6600, #999999);

  

average(#ff6600, #cccccc);

  

average(#ff6600, #ffffff);

  

average(#ff6600, #ff0000);

  

average(#ff6600, #00ff00);

  

average(#ff6600, #0000ff);

  

negation

Do the opposite effect to difference.

The result is a brighter color. Note: The opposite effect doesn’t mean the inverted effect as resulting from an addition operation.

Parameters:

• color1: A color object to act as the minuend.
• color2: A color object to act as the subtrahend.

Returns: color

Example:

negation(#ff6600, #000000);

  

negation(#ff6600, #333333);

  

negation(#ff6600, #666666);

  

negation(#ff6600, #999999);

  

negation(#ff6600, #cccccc);

  

negation(#ff6600, #ffffff);

  

negation(#ff6600, #ff0000);

  

negation(#ff6600, #00ff00);

  

negation(#ff6600, #0000ff);