Core Concepts

Functions and directives

Custom functions and directives Sfumato provides to your CSS.

Overview

Sfumato provides several special features that enhance what you can do in your own custom CSS. These are optional advanced features. If you need to use them, you'll know.

Directives

Directives are Sfumato-specific at-rules you can use in your CSS. They offer additional functionality for Sfumato projects.

@import

When used in your source CSS file, the standard CSS @import directive is handled by Sfumato. It reads and processes the linked CSS code, giving the file access to Sfumato functions and directives. No special changes need to be made to your imported files.

@import "shared/buttons.css";

You can also append the @layer name for the imported CSS. For example, if you want utility classes to be able to override your custom classes, those custom classes must be in the "@layer components" layer:

@import "shared/buttons.css" components;

@utility

You can add custom utility classes using the @utility directive. They will work with variants like md, hover, and dark:

@layer sfumato {
    ...
    @utility translate-center {
        translate: -50% -50%;
    }
}

@variant

You can use the @variant directive to apply a Sfumato variant to styles in your CSS, like this media breakpoint:

.text-body {

    font-size: 16px;

    @variant md {
        font-size: 20px;
    }
}

@custom-variant

For times when you're using the same arbitrary variant more than once, you should consider creating a custom variant using the @custom-variant directive:

@layer sfumato {
    ...
    @custom-variant supports-scale (@supports(transform:scale(1.25)));
    ...
    @custom-variant new-hover (&:hover:not(:focus):not(:active));
}

@apply

You can use the @apply directive to add utility class styles to your own custom CSS classes:

.text-body {
    @apply text-base text-black leading-5;
    ...
}

Keep in mind that you cannot use variants with @apply, so use the @variant directive for those cases:

.text-body {
    @apply text-base text-black leading-5;
    ...
    @variant dark {
        @apply text-white;
    }
}

Functions

Sfumato provides functions to make integrating Sfumato into your custom CSS easier. They allow you to keep your custom styles more consistent with your markup.

--alpha()

You can use the --alpha() function to easily adjust the opacity of a color:

.text-body {
    color: --alpha(var(--color-slate-900) / 85%);
}

--spacing()

You can use the --spacing() function to easily generate a spacing value based on your theme settings. The numbers use the same scale as other utility classes, like margin and padding (e.g. p-4):

.text-body {
    padding: --spacing(4);
    margin: calc(--spacing(4) - 10px);
}

They can also be used in arbitrary values, like within a calc():

<div class="p-[calc(--spacing(4)_-_0.15rem)]"></div>

Colors

forced-color-adjust