// sample-main.scss: loads the partial _sample-tokens.scss with @use.
// Free sample from 99helpers.com/file-types/scss
// Keep both files in the same folder, then run:
//   npx sass sample-main.scss sample-main.css

// 1. @use loads a file once, under a namespace (here "tokens"). Leave out
//    the underscore and the extension. `with` overrides !default values.
@use "sample-tokens" as tokens with (
  $brand: #7c3aed,
  $radius: 4px
);

// 2. Variables, functions and mixins are reached through the namespace.
body {
  font-family: tokens.$font-stack;
}

h1 {
  font-size: tokens.step(3);
}

.button {
  border-radius: tokens.$radius;
  background: tokens.$brand;

  &:focus-visible {
    @include tokens.focus-ring;
  }
}

// 3. The old way was:  @import "sample-tokens";
//    It made every variable global and ran the file again for every import.
//    @import is deprecated since Dart Sass 1.80.0 and is due to be removed
//    in Dart Sass 3.0.0.