# @unsass/utilities

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

Latest version **1.3.1** (published 2022-08-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @unsass/utilities
pnpm add @unsass/utilities
yarn add @unsass/utilities
bun add @unsass/utilities
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2022-08-17 |
| First published | 2022-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=14.0.0 |
| Dependencies | 1 |
| Unpacked size | 22.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | bdamevin |
| Keywords | sass, utilities, ellipsis, font-smoothing, pointer-events, touch-screen, replace, unsass, css |

## Links

- npm: https://www.npmjs.com/package/@unsass/utilities
- Repository: https://github.com/unsass/utilities
- Issues: https://github.com/unsass/utilities/issues
- npm.io page: https://npm.io/package/@unsass/utilities

## Dependencies (1)

- [sass](https://npm.io/package/sass.md) ^1.52.3

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.3.1 (latest) — 2022-08-17
- 1.3.0 — 2022-03-21
- 1.2.0 — 2022-02-20
- 1.1.0 — 2022-02-20
- 1.0.0 — 2022-02-19
- 0.0.0 — 2022-02-19

## README

# Utilities

[![Version](https://flat.badgen.net/npm/v/@unsass/utilities)](https://www.npmjs.com/package/@unsass/utilities)
[![Download](https://flat.badgen.net/npm/dt/@unsass/utilities)](https://www.npmjs.com/package/@unsass/utilities)

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

## Install

```shell
npm install @unsass/utilities
```

## Usage

```scss
@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...

```scss
@use "@unsass/utilities";

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

...will produce the following CSS...

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

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

The following Sass...

```scss
@use "@unsass/utilities";

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

...will produce the following CSS...

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

#### Ellipsis rule with `utilities.ellipsis()`

The following Sass...

```scss
@use "@unsass/utilities";

.foo {
    @include utilities.ellipsis;
}
```

...will produce the following CSS...

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

#### Ellipsis multiline rule with `utilities.ellipsis-multiline()`

The following Sass...

```scss
@use "@unsass/utilities";

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

...will produce the following CSS...

```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...

```scss
@use "@unsass/utilities";

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

...will produce the following CSS...

```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`](./string) | Utilities functions for string. | `utilities.string-*` |
| [`strip`](./strip)   | Utilities functions for strip.  | `utilities.strip-*`  |

---
_Source: https://npm.io/package/@unsass/utilities · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._