LESS

A LESS Mixin to change font-color based on font-size

by

Just a little LESS fun for the day… Here is a LESS Mixin to change font-color based on font-size.

Green big.
Yellow just right.
Red little.

It can be used with or without passing units (without units will use pixels). Adds bold just for fun.


.colorBySize(@pxValue) when (@pxValue < 12px){ color:red; } .colorBySize(@pxValue) when (@pxValue =< 16px) and (@pxValue >= 12px){
color:yellow;
}

.colorBySize(@pxValue) when (@pxValue > 16px){
color:green;
}

.colorBySize(@_) when not (ispixels(@_)){
font-size: ~"@{_}px";
// font-size: @_;
font-weight: bold;
}

.colorBySize(@_) when (ispixels(@_)){
font-size: @_;
font-weight: bold;
}

p.little{
.colorBySize(9);
}

p.justright{
.colorBySize(12);
}

p.big{
.colorBySize(18);
}