chore: Use Sass @use in plop template and README (#1793)

Co-authored-by: Aram <[email protected]>

plopfile.mjs

@@ -52,7 +52,7 @@ export default function (plop) {
         type: 'append',
         path: 'packages/css/src/components/index.scss',
         pattern: `/* Append here */`,
-        template: `@import "./{{kebabCase name}}/{{kebabCase name}}";`,
+        template: `@use "./{{kebabCase name}}/{{kebabCase name}}";`,
       },
       {
         type: 'add',

proprietary/tokens/README.md

@@ -146,16 +146,22 @@ Note that redefining the value of a token is a much better approach than redecla
 ## Usage in Sass
 
 The tokens can be imported as Sass variables as well.
+As they are already prefixed, the namespace that Sass would assign isn’t necessary.
 
 ```sass
-@import "@amsterdam/design-system-tokens/dist/index.scss"
+@use "@amsterdam/design-system-tokens/dist/index.scss" as *;
 ```
 
-Import the compact tokens if you need them.
-Sass will override spacious values automatically.
+Import the compact tokens if needed.
+Note that Sass doesn't allow importing them alongside the default set due to naming conflicts.
+Address these tokens through the `compact` namespace and do not use the spacious tokens they replace.
 
 ```sass
-@import "@amsterdam/design-system-tokens/dist/compact.scss"
+@use "@amsterdam/design-system-tokens/dist/compact.scss";
+
+.class {
+  padding-block: compact.$ams-space-md;
+}
 ```
 
 ## Usage in JavaScript