Using @debug command in SCSS Angular project

Question

I am having difficulties using SASS variables. In particular I would like to inspect scss variables values at runtime. I found this command: https://sass-lang.com/documentation/at-rules/debug

but I cannot figure out how to make it work in my angular project.

Example:

$font-family: "Roboto", sans-serif;
$font-size: 16px;
$mat-icons-font-size: 24px;

@debug "font-size before media rules: #{$font-size}";
@media (min-width: 900px) {
    $font-size: 24px;
}
@media (max-width: 400px) {
    $font-size: 13px;
}

@debug "font-size before after rules: #{$font-size}";

Any suggestions?

UPDATE

Sorry, I found it in the terminal console output:

⠋ Generating browser application bundles...src\app\theme\styles\_variables.scss:5 DEBUG: font-size before media rules: 16px
src\app\theme\styles\_variables.scss:5 DEBUG: font-size before media rules: 16px
src\app\theme\styles\_variables.scss:17 DEBUG: font-size before after rules: 16px
src\app\theme\styles\_variables.scss:17 DEBUG: font-size before after rules: 16px
⠙ Generating browser application bundles (phase: building)...src\app\theme\styles\_variables.scss:5 DEBUG: font-size before media rules: 16px
src\app\theme\styles\_variables.scss:17 DEBUG: font-size before after rules: 16px
src\app\theme\styles\_variables.scss:5 DEBUG: font-size before media rules: 16px
src\app\theme\styles\_variables.scss:17 DEBUG: font-size before after rules: 16px

Answer 1

The output will be found in your compilation console.

SAAS is a compile-time facility: it generates css files with a higher-order language.

But the CSS that is generated is static, not dynamic. Your CSS files do not become "runnable" because you use SASS.

So beware what you ask for: your example will always output 16px because the @media query is a runtime facility.