Learning LESS: Maths + Colour Functions
Continuing from my previous article on setting up LESS to improve your stylesheet efficiency and control, this week I’ll be covering the use of operators and pre-built functions within LESS.
If you remember correctly we can declare variables like:
[css]// Simple LESS variable declarations
@normalPadding: 10px;
@defaultText: 13px;[/css]
If you read the previous tutorial on variables, that shouldn’t be anything new.
Mathmetical operators in LESS
Now we want to do some maths on this variable declaration, but very simple maths, so don’t close the tab just yet!
For example, if you want to make your blockquote tags stand out, you could either hard-code it in, or manipulate the baseline variables
[css]// Multiplying variables
blockquote {
padding: @normalPadding * 1.5;
font-size: @defaultText * 1.2;
}[/css]
Once compiled this’ll give us a value of 15 pixels for the padding (i.e. 10 * 1.5) and 15.6 for the font size.
Notice that even though our original normalPadding variable has a unit value attached (‘px’ for pixels), the operator can still be applied. Great huh!
If you want a bit more finesse; you can also use addition, subtraction and devision too.
[css]// Further mathematical operators in LESS
.smallerStyle {
padding: (@normalPadding / 2) + 2;
font-size: @defaultText – 2;
} [/css]
This way you can specify default baselines for multiple properties at the top of your LESS stylesheet, with varying operators being applied for individual elements. If your client comes along and says the elements are too close together, you can simply change your baseline padding and margin values.
One word of warning though, don’t switch measurement units around. If you go from em‘s to px‘s or vice versa, your operators will produce drastic results.
Although browsers handle decimals for a lot of properties, if you want to do some mathematical rounding you can use these functions:
ceil( 0.7 ) // Rounds upwards to one floor( 0.7 ) // Rounds downwards to zero round( 0.7 ) // Rounds to the nearest integer, one in this example
How to use colour functions
Now onto one of the strongest features of LESS, in my opinion. Colour functions. A true breakthrough for all CSS coders everywhere.
Lets say you’ve designed your site and want to use a light blue (#2887B3) for your menu background. So you code that in, but then you realise you need a really light blue for the text. Even worse, your client has asked if there can also be a border colour too.
Well unless you’ve got an uncanny ability to do hex manipulation in your head, it’d normally be a trip back to photoshop to find some suitable candidates. Not any more!
[css]// Baseline cclour
@bgColour: #2887B3;
#menu li a {
background-color: @bgColour;
// Much lighter colour for text
color: lighen( @bgColour , 20% );
// A much darker colour, based on our default colour
border: 1px solid darken( @bgColour , 50% );
}
[/css]
Now you can hopefully begin to see the benefits of using LESS.
You can switch between your stylesheet editor and your browser window if you’re just tweaking colours. How about making the border a further 5% darker, nice and simple to do.
You can also use saturate( color , percentage) and desaturate( color , percentage) to play with the colours saturation levels. The percentage values here only need fine tweaking as it makes a big difference very quickly.
Want to play with the hue of your colours?
Well LESS has this covered too.
As colours are essentially plotted on a circle, you can spin around this circle to get different values.
The second argument for the spin function is a value in degrees, so can be anything from 1-359 in theory. Setting it to 0, or 360, will just return the original colour. Spinning by 180 should give you a perfect contrast… use that bit of knowledge sparingly though!
Example of using spin in LESS:
[css]
.anotherElement {
background-color: spin( @bgColour , 30 );
color: spin( @bgColor , -90 );
}[/css]
All pretty cool though right.
Hopefully those functions and operators should help you out on your LESS journey.