Utilities

Sass mixins and functions utilities for made your development more easier.

Install

npm install @unsass/utilities

Usage

@use "@unsass/utilities";

API

Sass mixins

Mixin	Description
disabled-touch-screen	Sets the disabled touch screen declaration.
disabled-pointer-events	Sets the disabled pointer events declaration.
ellipsis	Sets the ellipsis declaration.
ellipsis-multiline($line, $orient)	Sets the ellipsis multiline declaration.
font-smoothing	Sets the font smoothing declaration.

Disabled touch screen with utilities.disabled-touch-screen()

The following Sass...

@use "@unsass/utilities";

.foo {
    @include utilities.disabled-touch-screen {
        color: darkcyan;
    }
}

...will produce the following CSS...

@media (pointer: fine) {
    .foo {
        color: darkcyan;
    }
}

Disabled pointer events with utilities.disabled-pointer-events()

The following Sass...

@use "@unsass/utilities";

.foo {
    @include utilities.disabled-pointer-events;
}

...will produce the following CSS...

.foo {
    cursor: default;
    pointer-events: none;
}

Ellipsis rule with utilities.ellipsis()

The following Sass...

@use "@unsass/utilities";

.foo {
    @include utilities.ellipsis;
}

...will produce the following CSS...

.foo {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Ellipsis multiline rule with utilities.ellipsis-multiline()

The following Sass...

@use "@unsass/utilities";

.foo {
    @include utilities.ellipsis-multiline;
}

...will produce the following CSS...

.foo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Font smoothing rule with utilities.font-smoothing()

The following Sass...

@use "@unsass/utilities";

.foo {
    @include utilities.font-smoothing;
}

...will produce the following CSS...

.foo {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

Sass functions

Function	Description
string-replace($string, $search, $replace)	Return value without the unit.
strip-unit($value)	Return value with replacement option.

Components

Component	Description	Sass @use prefix
string	Utilities functions for string.	utilities.string-*
strip	Utilities functions for strip.	utilities.strip-*