1.3.1 • Published 2 years ago
@unsass/utilities v1.3.1
Utilities
Sass mixins and functions utilities for made your development more easier.
Install
npm install @unsass/utilitiesUsage
@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-* |