浏览器家园·资讯

展开

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:

Returns: color

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

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

Color 1 ➜ Color 2

desaturate

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

Parameters:

Returns: color

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

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

Color 1 ➜ Color 2

lighten

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

Parameters:

Returns: color

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

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

Color 1 ➜ Color 2

darken

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

Parameters:

Returns: color

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

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

Color 1 ➜ Color 2

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:

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:

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:

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:

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%)

Color 1 ➜ Color 2

Color 1 ➜ Color 2

mix

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

Parameters:

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)

Color 1 + Color 2 ➜ Color 3

tint

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

Parameters:

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);

Color 1 ➜ Color 2

shade

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

Parameters:

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);

Color 1 ➜ Color 2

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%)

Color 1 ➜ Color 2

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

Color 1 ➜ Color 2

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:

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:

Color 1 Color 1 Color 1 Color 1 Color 1

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:

Returns: color

Examples:

multiply(#ff6600, #000000);

Color 1 Color 2 Color 3

multiply(#ff6600, #333333);

Color 1 Color 2 Color 3

multiply(#ff6600, #666666);

Color 1 Color 2 Color 3

multiply(#ff6600, #999999);

Color 1 Color 2 Color 3

multiply(#ff6600, #cccccc);

Color 1 Color 2 Color 3

multiply(#ff6600, #ffffff);

Color 1 Color 2 Color 3

multiply(#ff6600, #ff0000);

Color 1 Color 2 Color 3

multiply(#ff6600, #00ff00);

Color 1 Color 2 Color 3

multiply(#ff6600, #0000ff);

Color 1 Color 2 Color 3

screen

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

Parameters:

Returns: color

Example:

screen(#ff6600, #000000);

Color 1 Color 2 Color 3

screen(#ff6600, #333333);

Color 1 Color 2 Color 3

screen(#ff6600, #666666);

Color 1 Color 2 Color 3

screen(#ff6600, #999999);

Color 1 Color 2 Color 3

screen(#ff6600, #cccccc);

Color 1 Color 2 Color 3

screen(#ff6600, #ffffff);

Color 1 Color 2 Color 3

screen(#ff6600, #ff0000);

Color 1 Color 2 Color 3

screen(#ff6600, #00ff00);

Color 1 Color 2 Color 3

screen(#ff6600, #0000ff);

Color 1 Color 2 Color 3

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:

Returns: color

Example:

overlay(#ff6600, #000000);

Color 1 Color 2 Color 3

overlay(#ff6600, #333333);

Color 1 Color 2 Color 3

overlay(#ff6600, #666666);

Color 1 Color 2 Color 3

overlay(#ff6600, #999999);

Color 1 Color 2 Color 3

overlay(#ff6600, #cccccc);

Color 1 Color 2 Color 3

overlay(#ff6600, #ffffff);

Color 1 Color 2 Color 3

overlay(#ff6600, #ff0000);

Color 1 Color 2 Color 3

overlay(#ff6600, #00ff00);

Color 1 Color 2 Color 3

overlay(#ff6600, #0000ff);

Color 1 Color 2 Color 3

softlight

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

Parameters:

Returns: color

Example:

softlight(#ff6600, #000000);

Color 1 Color 2 Color 3

softlight(#ff6600, #333333);

Color 1 Color 2 Color 3

softlight(#ff6600, #666666);

Color 1 Color 2 Color 3

softlight(#ff6600, #999999);

Color 1 Color 2 Color 3

softlight(#ff6600, #cccccc);

Color 1 Color 2 Color 3

softlight(#ff6600, #ffffff);

Color 1 Color 2 Color 3

softlight(#ff6600, #ff0000);

Color 1 Color 2 Color 3

softlight(#ff6600, #00ff00);

Color 1 Color 2 Color 3

softlight(#ff6600, #0000ff);

Color 1 Color 2 Color 3

hardlight

The same as overlay but with the color roles reversed.

Parameters:

Returns: color

Example:

hardlight(#ff6600, #000000);

Color 1 Color 2 Color 3

hardlight(#ff6600, #333333);

Color 1 Color 2 Color 3

hardlight(#ff6600, #666666);

Color 1 Color 2 Color 3

hardlight(#ff6600, #999999);

Color 1 Color 2 Color 3

hardlight(#ff6600, #cccccc);

Color 1 Color 2 Color 3

hardlight(#ff6600, #ffffff);

Color 1 Color 2 Color 3

hardlight(#ff6600, #ff0000);

Color 1 Color 2 Color 3

hardlight(#ff6600, #00ff00);

Color 1 Color 2 Color 3

hardlight(#ff6600, #0000ff);

Color 1 Color 2 Color 3

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:

Returns: color

Example:

difference(#ff6600, #000000);

Color 1 Color 2 Color 3

difference(#ff6600, #333333);

Color 1 Color 2 Color 3

difference(#ff6600, #666666);

Color 1 Color 2 Color 3

difference(#ff6600, #999999);

Color 1 Color 2 Color 3

difference(#ff6600, #cccccc);

Color 1 Color 2 Color 3

difference(#ff6600, #ffffff);

Color 1 Color 2 Color 3

difference(#ff6600, #ff0000);

Color 1 Color 2 Color 3

difference(#ff6600, #00ff00);

Color 1 Color 2 Color 3

difference(#ff6600, #0000ff);

Color 1 Color 2 Color 3

exclusion

A similar effect to difference with lower contrast.

Parameters:

Returns: color

Example:

exclusion(#ff6600, #000000);

Color 1 Color 2 Color 3

exclusion(#ff6600, #333333);

Color 1 Color 2 Color 3

exclusion(#ff6600, #666666);

Color 1 Color 2 Color 3

exclusion(#ff6600, #999999);

Color 1 Color 2 Color 3

exclusion(#ff6600, #cccccc);

Color 1 Color 2 Color 3

exclusion(#ff6600, #ffffff);

Color 1 Color 2 Color 3

exclusion(#ff6600, #ff0000);

Color 1 Color 2 Color 3

exclusion(#ff6600, #00ff00);

Color 1 Color 2 Color 3

exclusion(#ff6600, #0000ff);

Color 1 Color 2 Color 3

average

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

Parameters:

Returns: color

Example:

average(#ff6600, #000000);

Color 1 Color 2 Color 3

average(#ff6600, #333333);

Color 1 Color 2 Color 3

average(#ff6600, #666666);

Color 1 Color 2 Color 3

average(#ff6600, #999999);

Color 1 Color 2 Color 3

average(#ff6600, #cccccc);

Color 1 Color 2 Color 3

average(#ff6600, #ffffff);

Color 1 Color 2 Color 3

average(#ff6600, #ff0000);

Color 1 Color 2 Color 3

average(#ff6600, #00ff00);

Color 1 Color 2 Color 3

average(#ff6600, #0000ff);

Color 1 Color 2 Color 3

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:

Returns: color

Example:

negation(#ff6600, #000000);

Color 1 Color 2 Color 3

negation(#ff6600, #333333);

Color 1 Color 2 Color 3

negation(#ff6600, #666666);

Color 1 Color 2 Color 3

negation(#ff6600, #999999);

Color 1 Color 2 Color 3

negation(#ff6600, #cccccc);

Color 1 Color 2 Color 3

negation(#ff6600, #ffffff);

Color 1 Color 2 Color 3

negation(#ff6600, #ff0000);

Color 1 Color 2 Color 3

negation(#ff6600, #00ff00);

Color 1 Color 2 Color 3

negation(#ff6600, #0000ff);

Color 1 Color 2 Color 3

文章TAG:函数  手册  Less  

加载全部内容

相关教程
猜你喜欢
大家都在看