Using the utility API

We have seen what the syntax of the utility API looks like, and we will now see some examples of how to use it for different purposes. First, we will see examples of how to generate and add both simple and complex new utilities, and then we will see examples of how to overwrite, modify, and remove existing utilities. To do this, we’re going to use the following two Sass functions: map-merge() (to merge existing maps) and map-get() (to get a value associated with a key from a specified Sass map).

Adding a simple utility

First, we will generate and add a simple cursor utility, which can be used to change the cursor when hovering over specific elements. We’re specifying the name of the utility ("cursor"), the CSS property to use (cursor), and the values to use for that CSS property (auto context-menu copy grab help pointer wait). These are the minimum required options to specify when using the utility API.

Before using the syntax...