3

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.

style.scss

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

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

css/_var.scss

$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

Mike Eng
  • 1,593
  • 4
  • 34
  • 53
  • Also tried adding !global to every variable definition, such as `$baseFontSize:16 !default !global;` , but that gave the same error – Mike Eng Nov 19 '21 at 21:41

1 Answers1

2

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

Tanner Dolby
  • 4,253
  • 3
  • 10
  • 21