Skip to content

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

License

Notifications You must be signed in to change notification settings

unsass/utilities

Repository files navigation

Utilities

Version Download

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-*