@toojs/style-utility-mixin

Scss mixin helper

Some useful scss mixins collection.

Installation

yarn add @toojs/style-utility-mixin

Usage

Use scss file

@import '@toojs/style-utility-mixin/mixin';

ellipsis

Mixin helping to truncate and add ellipsis to a string too long for it to fit

.foo {
  @include ellipsis($lines: 1, $lineHeight: 1em);
  ///
}

hairline

Hairline mixin helper

.foo {
  @include hairline($position, $color: currentColor, $size: 1px);
  ///
}

Use css file

/** your css file */
@import '@toojs/style-utility-mixin/mixin.css';

<div class="ellipsis">blablablablabla</div>
<div class="ellipsis--2">ellipsis when content over 2 lines</div>
<div class="ellipsis--3">ellipsis when content over 3 lines</div>

<div class="hairline-right">hairline right</div>
<div class="hairline-left">hairline left</div>
<div class="hairline-top">hairline top</div>
<div class="hairline-bottom">hairline bottom</div>