CSS Functions Simplified.

Introduction

Functions are an integral part of programming languages used to perform a single action over and over again. In CSS however, they are a little different. They are special types of values that can be used to perform calculations or manipulate data in specific properties. They are a great tool in your arsenal to help you write more dynamic and responsive stylesheets.

Fundamentals

When it comes to CSS functions, we do not create our functions, we use those provided to us by CSS. CSS functions are written using a function syntax, with a function name followed by a set of parentheses containing one or more arguments. The arguments can be values, variables, or other functions, and are separated by commas

selector {
  property: function([argument], [argument]);
}

There is a long list of CSS functions available, each with a specific purpose and set of arguments, some of these such as calc and attr, take arguments that are evaluated at runtime ( the point at which the program is executed ), while others, such as rgba and var, take fixed values that are evaluated at parse time ( the point at which the program is compiled/interpreted ).

In this article, we will go through some of the most useful and popular CSS functions, and provide examples of how you can use them in your stylesheets.

Functions

• The var function is used to allow you to define and set variables in your stylesheet. It allows you to reference a custom property you defined earlier in the stylesheet, which then allows you to reuse those properties’ values throughout your stylesheet, such as colors and font sizes. A common use case for this function is setting a primary color for your site.

    :root {
      --primary-color: #3275a8;
      --text-size: 0.6rem;
    }
  
    h1 {
      color: var(--primary-color);
    }
  
    p{
      font-size: var(--text-size);
    }
  
    a {
      color: var(--primary-color);
    }
  

  In the code above, we set the values #3275a8 and 0.6rem to the variables primary-color and text-size respectively, next we use the var function to reference these values through their variables, this saves us from having to manually input those values every time we need to use them.

  NOTE: When naming CSS variables, it contains only letters and dashes just like other CSS properties (eg: lineheight,-moz-box-sizing) but it should start with double dashes ( — )

  these are invalids variable names: — 123height: 50px; — #color: red;

  valid variable names: — color: green; — width: 100%;

• The url function is a CSS function that allows you to state the location of a file as a value of a property, it is commonly used with the CSS background-image property to specify an image as the background value. The function takes a single argument, which is the URL of the file. The URL can be either an absolute URL, which specifies the full path to the file, or a relative URL, which specifies the path relative to the current document.

section {
  background-image: url(/images/bg01.jpg);
}

See the url function as a useful and versatile tool that can help you include external resources in your stylesheets and create more dynamic and expressive styles.

• The calc function is a function that takes two arguments and calculates a result with the stated operator. You can use it to combine different values of different units like pixels and percentages for instance

:root {
  --font-scale: 1.3;
  --text-size: 0.6rem;
}

h1{
  font-size: calc(0.8rem * 1.2);
}

p{
  font-size:  calc(var(--text-size) * var(--font-scale));
}

The calc function is also updated on the fly so that if a value changes, the final calc value will also be immediately updated. Since calc can also accept CSS var values as arguments, this allows you an incredible degree of flexibility.

• The attr function is a CSS function that lets you retrieve the value of an attribute of an element and use it as a value in your styles. It is often used with the content property to insert dynamic content into a pseudo-element, such as a ::before or ::after. The attr function takes just one argument, which is the name of the attribute that you want to retrieve, this could also include custom attributes that you create. It can then be used to retrieve the value of that attribute.

An embedded codepen to show an example of the attr function

<!-- THIS IS THE HTML -->
<p title="CAN YOU SEE ME?">
  Example of the <code>attr</code> function in action
</p>

/* THIS IS THE CSS */
p::after {
  content: attr(title);
  color: red;
  font-weight: 700;
}

//THIS IS THE RESULT:
Example of the `attr` function in action.CAN YOU SEE ME?

You might need to practice with this to get familiar with it. The attr function allows you to use the values of elements as part of your styles and that can help you create more dynamic and interactive stylesheets.

Conclusion

There is a long list of exhaustive CSS functions here. These functions when used in conjunction with other values and functions help you write more dynamic and expressive stylesheets. They are a powerful tool that can help you create more flexible and reusable styles, which makes it easier to maintain and update your website. Whether you are a beginner or an experienced web developer, learning about CSS functions is an important step toward becoming proficient in CSS.

If you found this useful, do follow me and leave a comment. Ciao.