@unsass/utilities

1.3.1 • Public • Published

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

Package Sidebar

Install

npm i @unsass/utilities

Weekly Downloads

15

Version

1.3.1

License

MIT

Unpacked Size

22.6 kB

Total Files

25

Last publish

Collaborators

  • bdamevin