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
>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
@useat-rules which allows you to load a directory of partials using a single@usecall