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