SASS undefined variable when using @use

I’m using some copied SASS code to start a project. It was written with @import for Ruby SASS, and I’ve changed it to @use for Dart SASS.


// base
@use 'css/var' as *;
@use 'css/base' as *;
@use 'css/typography' as *;

// layouts
@use 'css/container' as *;
@use 'css/grid' as *;


$baseFontSize:16 !default;
$baseLineHeight:1.5 !default; 
$leading:$baseLineHeight * 1rem !default;

from within the directory that style.scss is in, I ran sass --watch .

I keep getting the error:

Error: Undefined variable. ╷ 10 │ font-size: ($baseFontSize /
16) * 100%; │ ^^^^^^^^^^^^^ ╵
css/_typography.scss 10:17 @use
style.scss 6:1 root stylesheet

I’m using SASS version 1.43.4

>Solution :

If the _typography.scss partial uses Sass variables from css/_var.scss then you need to add a @use "path-to-css/_var.scss" as *; at-rule to the _tyopgraphy.scss partial. I reckon it wouldn’t give an error anymore as it will know about that variable reference.

When you load css/_var.scss to the base stylesheet to be compiled you can use those variables in that style.scss file, but the partials being loaded into the main file will have to have @use at-rules if they use variables/mixins/etc and haven’t been loaded already.

Note: You can also look into using index files with @use at-rules which allows you to load a directory of partials using a single @use call

Leave a Reply