How to Use Functions in Less CSS

Less CSS guide image 1

This practical guide explains how to use functions in less css with clear steps and useful context. It also covers common requirements, potential problems, and the details that can help you get better results.

If you've mastered writing standard CSS, you can seamlessly transition to using Less CSS without much learning. This makes it easy to maintain your existing CSS knowledge while taking advantage of Less's advanced features.

What Are Functions and Why Are They Important?

In programming, a function is a block of code that executes a specific task. You can also reuse it somewhere else in the program. Functions typically take data, process it, and return results.

They make it easy to reduce code duplication in a program. Suppose you have a program that calculates a discount based on a price entered by a user. In a language like JavaScript, you can implement it like this:

function checkDiscount(price, threshold){ if (price >= threshold){ let discount = 5/100 * price; return `Your discount is $${discount}`; } else { return `Sorry, this item does not qualify for a discount. ` } }

You can then call this function and pass it to price and threshold.

let price = prompt("Enter the item price: ") alert(checkDiscount(price, 500))

By removing the logic for checking the discount, the program is not only readable, but you now have a reusable block of code to handle the discount and return the result. Functions can do many more things, the above are just the basics.

What Is a Function in Less CSS?

Traditional CSS has a very limited number of functions for the programmer. One of CSS's most popular functions is the math function calc() which does exactly what it does�it performs calculations and uses the results as property values in CSS.

p{ background-color: red; width: calc(13px - 4px); }

Less CSS has several functions that do more than just arithmetic. One function that you may come across in Less is the if function. The if function takes three parameters: a condition and two values. The code block below shows how you can use this function:

@width: 10px; @height: 20px; div{ margin:if((@width > @height), 10px, 20px) }

In the above code block, the Less compiler checks if the width of the variable (determined by the @ symbol) is greater than the height of the variable. If the condition is true, the function returns the first value after the condition (10px). Otherwise, the function returns the second value (20px).

After compiling, the CSS output should look like this:

div { margin: 20px; }

How to Use Boolean in CSS

A Boolean is a variable that can have two values: true or false. With the boolean() function in Less, you can store the true or false value of an expression in a variable for later use. Here is how it works.

@text-color: red;

In the above code block, the Less compiler checks to see if the text-color is red. Then the bg-color variable contains this value.

div{ background-color: if(@bg-color,green,yellow); }

The code block above compiles to the following output:

div { background-color: green; }

Replace text in a string with the replace() function

The replace() function syntax looks like this:

replace(string, pattern, replacement, flags)

string represents the string that you want to search and replace. pattern is the string to search for. pattern can also be a regular expression, but it is usually a string. After a successful match, the Les CSS compiler will replace the pattern with replacement.

Optionally, the replacemen() function can also contain a flags parameter for the regular expression flag.

@string: "Hello"; @pattern: "ello"; @replacement: "i"; div::before{ content: replace(@string,@pattern,@replacement) }

Result:

div::before { content: "Hi"; }

List Function in Less CSS

In Less CSS, you use commas or spaces to define a list of values. For example:

@groceries: "bread", "banana", "potato", "milk";

You can use the length() function to evaluate the number of elements in the list.

@result: length(@groceries);

You can also use the extract() function to extract the value at a specific location. For example, if you want to get the 3rd element in the grocery list, do the following:

@third-element: extract(@groceries, 3);

Unlike conventional programming languages where list indexes start at 0, the list's starting index in Less CSS is always 1.

Build Simple Websites with Less CSS Functions

Now it's time to combine everything you've learned and create a simple project using Less CSS. Create a directory and add index.htm and style.less files.

Open the index.htm file and add the following HTML code:

 Document

The above code block has a parent "container" div with an empty h1 element. The src attribute on the script tag points to the path to the Less CSS Compiler.

Without this script tag, the browser will not be able to understand your code. Alternatively, you can install Less CSS on your computer via Node Package Manager (NPM), by running the following command in the terminal:

npm install -g less

Whenever you are ready to compile a.less file, just run the command below, making sure you specify the file to which the compiler should write the output.

lessc style.less style.css

In the style.less file, create two variables: container-width and container-bg-color to represent the width and background color of the "container" div, respectively.

@container-width: 50rem; @container-bg-color: yellow;

Next, create three variables namely: string, pattern, and replacement. Then add styles for the "container" div and the h1 element.

@string: "Hello from the children of planet Earth!"; @pattern: "children of planet Earth!"; @replacement: "inhabitants of Pluto!"; .container{ width: @container-width; background-color: @container-bg-color; padding: if(@container-width > 30rem, range(20px, 80px, 20),""); border: solid; } h1:first-child::after{ content: replace(@string,@pattern,@replacement); }

In the code block above, the range() function sets the padding property on the "container" div. The Less compiler will compile the style.less file to the following:

.container { width: 50rem; background-color: yellow; padding: 20px 40px 60px 80px; border: solid; } h1:first-child::after { content: "Hello from the inhabitants of Pluto!"; }

When you open the index.htm file in your browser, the output looks like this:

Build Simple Websites with Less CSS Functions - Less CSS

Above is how to use functions in Less CSS . Hope the article is useful to you.

Conclusion

Understanding Less CSS makes it easier to compare options, avoid common mistakes, and apply the information in this guide more effectively. Review the relevant requirements before making changes or choosing a solution.