Skip to content

Home

Jump to bottom Edit New page
danlash edited this page Feb 21, 2011 · 4 revisions

Functions

Color Functions

alpha
alpha(color, [amount])

Returns or modifies the alpha component of a color. The range of ‘amount’ is 0..1. If an ‘amount’ is specified, it is added to the colors existing alpha. You can also specify a percentage instead of decimal amount if desired.

RETURN MODIFY
LESS CSS
a: alpha(rgba(255, 255, 255, 1)); a: 1;
a: alpha(rgba(255, 255, 255, 0.5)); a: 0.5;
a: alpha(rgba(255, 255, 255, 0)); a: 0;
a:alpha(#fca); a: 1;
LESS CSS
a: alpha(rgba(255, 255, 255, 0.5), 0.25); a: rgba(255, 255, 255, 0.75);
a: alpha(rgba(255, 255, 255, 0.5), -0.25); a: rgba(255, 255, 255, 0.25);
a: alpha(#ffccaa, -25%); a: rgba(255, 204, 170, 0.75);
a: alpha(#ffccaa, -0.1); a: rgba(255, 204, 170, 0.9);
a: alpha(#ffccaa, -10%); a: rgba(255, 204, 170, 0.9);

blue
blue(color, [amount])

Returns or modifies the blue component of a color. The range of ‘amount’ is 0..255. If an ‘amount’ is specified, it is added to the colors existing blue. You can also specify a percentage instead of decimal amount if desired.

RETURN MODIFY
LESS CSS
b: blue(#fff); b: 255;
b: blue(#000); b: 0;
b: blue(#ccc); b: 204;
b: blue(rgba(255, 0, 127, 0.5)); b: 127;
LESS CSS
b: blue(#000, 75%); b: #0000bf;
b: blue(#000, 30); b: #00001e;
b: blue(#000, 127); b: #00007f;
b: blue(#000, 204); b: #0000cc;
b: blue(#fff, -25%); b: #ffffbf;

complement
complement(color)

Returns the compliment of a color.

RETURN
LESS CSS
c: complement(#fff); c: white;
c: complement(#000); c: black;
c: complement(#ccc); c: #cccccc;
c: complement(#fca); c: #aaddff;
c: complement(#fcc); c: #ccffff;
c: complement(#cfc); c: #ffccff;
c: complement(#ccf); c: #ffffcc;
c: complement(#eaa); c: #aaeeee;
c: complement(#dbb); c: #bbdddd;

grayscale
grayscale(color)

Converts a color to grayscale.

RETURN
LESS CSS
g: grayscale(#fff); g: white;
g: grayscale(#000); g: black;
g: grayscale(#ccc); g: #cccccc;
g: grayscale(#fcc); g: #e6e6e6;
g: grayscale(#cfc); g: #e6e6e6;
g: grayscale(#ccf); g: #e6e6e6;

green
green(color, [amount])

Returns or modifies the green component of a color. The range of ‘amount’ is 0..255. If an ‘amount’ is specified, it is added to the colors existing green. You can also specify a percentage instead of decimal amount if desired.

RETURN MODIFY
LESS CSS
g: green(#fff); g: 255;
g: green(#000); g: 0;
g: green(#ccc); g: 204;
g: green(rgba(255, 127, 0, 0.5)); g: 127;
LESS CSS
g: green(#000, 75%); g: #00bf00;
g: green(#000, 30); g: #001e00;
g: green(#000, 127); g: #007f00;
g: green(#000, 204); g: #00cc00;
g: green(#fff, -25%); g: #ffbfff;

hex
hex(number)

Returns the two digit hex value for a given decimal number. Useful in combination with other functions like blue or alpha.

RETURN
LESS CSS
h: hex(0); h: 00;
h: hex(204); h: CC;
h: hex(255); h: FF;

hsl
hsl(hue, saturation, lightness)

Returns a color with the specified hue, saturation and lightness components. The range for hue is 0..360. The range for saturation is 0..100. The range for lightness is 0..100.

RETURN
LESS CSS
h: hsl(0, 0, 0); h: black;
h: hsl(360, 0, 0); h: black;
h: hsl(360, 50, 50); h: #bf4040;
h: hsl(360, 100, 100); h: white;
h: hsl(180, 0, 0); h: black;
h: hsl(180, 50, 50); h: #40bfbf;
h: hsl(180, 100, 100); h: white;
h: hsl(0, 50, 100); h: white;
h: hsl(0, 100, 100); h: white;
h: hsl(0, 100, 50); h: red;
h: hsl(0, 50, 50); h: #bf4040;

hsla
hsla(hue, saturation, lightness, alpha)

Returns a color with the specified hue, saturation, lightness and alpha components.

RETURN
LESS CSS
h: hsla(0, 0, 0, 0); h: rgba(0, 0, 0, 0);
h: hsla(0, 0, 0, 0.5); h: rgba(0, 0, 0, 0.5);
h: hsla(0, 0, 0, 1); h: black;
h: hsla(180, 50, 50, 0.5); h: rgba(64, 191, 191, 0.5);
h: hsla(360, 100, 100, 0.75); h: rgba(255, 255, 255, 0.75);

hue
hue(color, [amount])

Returns or modifies the hue of a color. The unit of ‘amount’ is deg (degrees).

RETURN MODIFY
LESS CSS
h: hue(#fff); h: 0deg;
h: hue(#000); h: 0deg;
h: hue(#ccc); h: 0deg;
h: hue(#fcc); h: 0deg;
h: hue(#cfc); h: 120deg;
h: hue(#ccf); h: 240deg;
h: hue(#f00); h: 0deg;
h: hue(#0f0); h: 120deg;
h: hue(#00f); h: 240deg;
LESS CSS
h: hue(#fff, 45); h: white;
h: hue(#000, 45); h: black;
h: hue(#ccc, 45); h: #cccccc;
h: hue(#fcc, 45); h: #fff2cc;
h: hue(#cfc, 45); h: #ccfff2;
h: hue(#ccf, 45); h: #f2ccff;
h: hue(#f00, 45); h: #ffbf00;
h: hue(#0f0, 45); h: #00ffbf;
h: hue(#00f, 45); h: #bf00ff;

lightness
lightness(color, [amount])

Returns or modifies the brightness of a color. The range of ‘amount’ is 0..100. The value is added to the lightness of the color.

RETURN MODIFY
LESS CSS
l: lightness(#fff); l: 100%;
l: lightness(#ccc); l: 80%;
l: lightness(#000); l: 0%;
l: lightness(#fca); l: 83.33%;
l: lightness(#f00); l: 50%;
l: lightness(#0f0); l: 50%;
l: lightness(#00f); l: 50%;
LESS CSS
l: lightness(#fca, 90); l: white;
l: lightness(#000, 50); l: gray;
l: lightness(#000, 100); l: white;
l: lightness(#fff, -50); l: gray;
l: lightness(#fff, -25); l: #bfbfbf;
l: lightness(#fca, 50); l: white;
l: lightness(#fca, 10); l: #ffebdd;

mix
mix(color1, color2, [weight = 50%])

Mix two colors together. The ‘weight’ argument is specific to color1.

RETURN
LESS CSS
m: mix(#fff, #000); m: gray;
m: mix(#fff, #000, 90%); m: #e6e6e6;
m: mix(#fff, #000, 10%); m: #191919;
m: mix(#f0f, #0c0); m: #806680;
m: mix(#00f, #f00, 25%); m: #bf0040;

#####

Math Functions

String Functions

function name
func(required, [optional])

Description.

RETURN MODIFY
LESS CSS
LESS CSS
Add a custom footer
Add a custom sidebar
Clone this wiki locally