Best Practices

General guidelines and recommendations for using UnSass effectively across all packages.

Use Namespaces

Always use the @use rule with namespaces to avoid conflicts:

// ✅ Good
@use "@unsass/breakpoint";
@use "@unsass/css";

.component {
  @include breakpoint.up(md) {
    @include css.declaration(color, primary);
  }
}

// ❌ Avoid
@use "@unsass/breakpoint" as *;
@use "@unsass/css" as *;

Configure at Import

Configure packages when importing rather than using global variables:

// ✅ Good
@use "@unsass/breakpoint" with (
  $breakpoints: (sm: 640px, md: 768px)
);

// ❌ Avoid
$breakpoint-values: (sm: 640px, md: 768px);
@use "@unsass/breakpoint";

Keep Configuration Centralized

Create a central configuration file:

// styles/_config.scss
@forward "@unsass/breakpoint" with (
  $breakpoints: (sm: 640px, md: 768px, lg: 1024px)
);

@forward "@unsass/rem" with (
  $base-size: 16px
);

Then use it throughout your project:

// components/button.scss
@use "../config";

.button {
  @include config.breakpoint-up(md) {
    padding: config.rem(16px);
  }
}