Learning LESS: Using Functions

We continue on our journey of Learning LESS today as we take a look at Nested Rules in LESS, which will help you write extremely clean code. If you haven’t read our first three posts on the topic, check out the introduction, variables, mixins and nested rules posts.

Blog Series Roadmap

1. An Introduction
2. Using Variables
3. Using Mixins
4. Using Nested Rules
5. Using Functions
6. Divide and Conquer
7. Put It Into Action

Time to get our hands dirty in some LESS functions, which will likely blow your mind that it can be done in CSS.

Operations

The first type of ‘functions’ I’ll 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 I 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. Let’s set up a real world scenario.

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. But, if your WordPress theme, you give your users the option of altering the font size in a options panel and you don’t want to give the option for users to edit the size of the blockquote element (because you want to maintain proper proportions between the two font sizes).

So to set the size, you end up using LESS to dynamically size your blockquote depending on your base font size. Let’s take a look at the LESS. [Note: In these LESS examples, I use aspects that we’ve previously covered on Developer Drive, including variables, mixins, and more. Please be sure to brush up on the other posts as well if any of this confuses you.]

// Variables for example
// ---------------------

@baseFontSize: 16px;
@baseFontFamily: Helvetica, sans-serif;
@quoteFontFamily: Georgia, serif;

// LESS for Styling Paragraph and Blockquote
// -----------------------------------------

p {
    font-family: @baseFontFamily;
    font-size: @baseFontSize;
}

blockquote {
    font-family: @quoteFontFamily;
    font-size: @baseFontSize + 4;
}

Notice the font-size for the blockquote. We didn’t create a new variable for the blockquote font-size, we just took our @baseFontSize variable and added 4 to it! Four what, you say? LESS can correctly identify what unit of measurement is set, and then assign the number that same unit. So in this instance, LESS should add 4px to the font-size of the blockquote element. Let’s take a look at the compiled LESS:

p {
  font-family: Helvetica, sans-serif;
  font-size: 16px;
}
blockquote {
  font-family: Georgia, serif;
  font-size: 20px;
}

Sure enough, LESS took the base font-size of 16px and added 4 units to it, making the blockquote element have a font-size of 20px.

You can also expand upon the basic math shown above to include more complicated calculations such as multiplication, division, subtraction, including paratheses using order of operations, and also setting new variables with operations. A few examples include:

@specialWidth: @baseWidth * 2;
@megaFont: (@baseFontSize * 14) - 10;

Operations With Color

The operations we showed above can be used with colors as well as units of measurement. Colors can be created and manipulated with math as well. If you’re not super familiar with how hex colors are created and calculated, check out the W3Schools page on them. The calculation of hex colors can be complex, but can also be extremely powerful. Here is a simple example of manipulating hex colors:

// LESS
// ----

@color: #888 - #222;
h2 { color: @color; }

And the compiled CSS:

h2 {
  color: #666666;
}

Pretty slick, eh?

But alas, that’s not all LESS does with colors. It gets real fancy with some built in color functions. Since I can’t explain the color functions better than the official LESS website, can, here is the various color functions that are build into LESS:

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2);    // return a mix of @color1 and @color2

With all of these color functions, you can see how powerful you can get with just a few simple colors to start with, and develop an entire color palette with those functions.

Math Functions

Last but not least, LESS also provides math functions that you can use on numbers in your LESS code. These functions include round(), ceil(), floor(), and percentage(). Passing a number in these functions will produce a rounded number, a number always rounded up for ceil, a number always rounded down for floor, and convert a number into a percentage.

I will be honest in saying that I have yet to use any of the math functions in my LESS files, but I can definitely see possibilities for it, especially using ceil or floor to reach a number and passing that to the percentage function – then setting it as a declaration to a selector.

Wrapping Up Functions

That about wraps up our brief overview of LESS functions. You can dig much deeper into this realm when you’re coding up your sites, and if you have some great examples of how you’re using LESS, leave links in the comments below!

Our next post in the series will be Divide and Conquer – talking about how we can organize our LESS into modular, reusable, clean and organized code. Until next time!