3

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
fabio vassura
  • 33
  • 1
  • 5
  • Maybe isn't clear enough with just the update that you solve the situation. I'm seeing an answer with some suggestions, could you please vote it, comment it and/or mark it as the answer? – nilsandrey Jun 29 '21 at 21:05

1 Answers1

3

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.

Qortex
  • 7,087
  • 3
  • 42
  • 59