https://github.com/unsass/utilities

Sass mixins and functions utilities for made your development more easier.
https://github.com/unsass/utilities

functions mixins sass scss unsass utilities

Last synced: 16 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/unsass/utilities
• Owner: unsass
• License: mit
• Created: 2022-02-18T23:01:36.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-06T23:02:45.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T05:41:54.579Z (10 months ago)
• Topics: functions, mixins, sass, scss, unsass, utilities
• Language: SCSS
• Homepage:
• Size: 842 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

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