CODEWITHSUNDEEP
sassmodulescss-mixins
Amit Eshel
Amit Eshel

Reputation: 23

How do I use the @use module system of Sass?

Whenever I try to add a mixin or var from MediaQueries.scss it tells me it doesn't recognize them, they are in the same folder and I double checked vars and mixin names;

tast.scss:

$var: 200px;
@mixin blue {
    color: blue;
}

test.scss:

@use 'tast.scss';
.a {
    width: $var; // undefined variable
    width: tast.$var; // expected expression, was ".var;"
    @include blue; // no mixin named blue
    @include tast.blue; // expected "}", was ".blue;"
}

*It causes the same errors if I used this:

 @use 'tast';

Upvotes: 1

Views: 397

Answers (3)

lime
lime

Reputation: 1

@usevariables, functions and mixins are namespaced, so you will need to do this:

@use 'tast.scss' as *;

.a {
  width: $var;
}

Here is the official docs for reference - https://sass-lang.com/documentation/at-rules/use/#loading-members

Upvotes: 0

Coogie
Coogie

Reputation: 615

Since the new @use syntax is only supported by Dart Sass, the Watch Sass extension for VS Code doesn't support it (and I don't know if it ever will) since it uses a version of SassJS - and quite an old one at that.

Instead, you should be able to install Sass directly on your machine with npm install -g sass. This will install the Dart flavour of Sass.

Once installed, and available on your PATH, you can then use a script to watch a Sass file or a whole directory and compile as you make changes.

"scripts": {
  // watch a single file
  "sass:watch": "sass --watch input.scss output.css",

  // watch a directory 
  "sass:watch": "sass --watch src/sass:build/styles"
}

Upvotes: 1

Simplicius
Simplicius

Reputation: 2095

Sass doesn't need any filename extensions whenever you are importing a file or a module. Use @use 'tast'; instead of @use 'tast.scss';.

Here is the documentation.

Upvotes: 0

Related Questions