Learning LESS: Using Functions

LESS takes your CSS and puts it on steroids

Alex Ball continues on his journey of Learning LESS as he take a look at Nested Rules in LESS, which will help you write extremely clean code. Time to get our hands dirty in some LESS functions, which will likely blow your mind that it can be done in CSS. If you haven’t read the first three posts on the topic, check out the variables, mixins and nested rules posts.

 

The first type of ‘functions’ Alex Ball will cover are Operations. LESS kind of separates them from other functions, but for all intensive purposes, they can perform the same actions and thus why he grouped them with functions. The short of operations is that they’re just math. The long, is that you can use them to quickly and dynamically change pixels, percentages, ems, colors, and more in just one line of code and keep it relative to a baseline example. You’re creating a WordPress website for a client, and you are working on styling a blockquote element where you want the font to change from Helvetica to Georgia, become italic and increase slightly in size. So to set the size, you end up using LESS to dynamically size your blockquote depending on your base font size.

Comments

Be the first to write a comment

You must me logged in to write a comment.