Extract Utility Classes

WEAVV is purely built on top of the Sassy CSS. By using the existing SASS @extend directive allows you to expose any WEAVV utility classes into your custom CSS.

Using the SASS @extend Directive

Below are examples of how to use the @extend <selector ...> directive to extract WEAVV CSS utilities into your custom CSS.

• prefix parenthesis () is written as \(\).
• utility class text-shade-amber-1 is written as .text-shade-amber-1.
• pseudo class (hover)text-shade-amber-1 is written as .\(hover\)text-shade-amber-1.
• pseudo class with responsive .(md)(hover)text-shade-amber-1 is written as .\(md\)\(hover\)text-shade-amber-1.
• responsive (md)text-shade-amber-1 is written as .\(md\)text-shade-amber-1.

Examples

// @file: `src/_plugins.scss` in .scss
.btn {
  @extend
    // WEAVV utility classes
    .\(expand\)margin-4,
    .padding-x-2,
    .padding-y-1,
    .text-lg,
    .text-white,
    .font-semibold,
    .bg-tint-granite-1,
    .\(hover\)bg-shade-amber-1,
    .border,
    .border-shade-amber-3,
    .curve-border,
    .shadow,
    .cursor-pointer;
}

You can mix @extend with normal CSS,

.btn-large {
  // SASS/SCSS
  @extend
    // WEAVV utility classes
    .font-semibold,
    .text-shade-amber-1,
    .bg-tint-amber-5,
    .curve-border-lg;
  // Normal CSS
  font-size: 2em;
  padding: 1rem 1rem;
}

You can mix @extend with CSS Pseudo Variants,

.btn-large:hover {
  @extend
    .text-white,
    .bg-tint-amber-1,
    .shadow;
}

You can write in full SASSy way, if you prefer the best practice,

.btn {
  @extend
    .bg-shade-amber-1;

  &:hover {
    @extend
      .bg-tint-amber-1,
      .shadow-lg;
  }
}

You can use above method for refactoring exiting style sheets or migrating to use the WEAVV. (See CSS Migration).