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 torelative
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 torelative
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 torelative
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 torelative
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 torelative
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 torelative
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
andscreen
. 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);
文章TAG:函数 手册 Less
加载全部内容