How to use variables from scss file in pug?

Question

Sass

There are variables in vars.scss

$DarkShade100            : rgba(31, 32, 65, 1);
$DarkShade75             : rgba(31, 32, 65, .75);
$DarkShade50             : rgba(31, 32, 65, .5);
$DarkShade25             : rgba(31, 32, 65, .25);
$DarkShade5              : rgba(31, 32, 65, .05);
$purple                  : rgba(188, 156, 255, 1);
$green                   : rgba(111, 207, 151, 1);

you need to use them in the pug file in the mixin instead of backgrColor and opacityColor

mixin color(colorName, colorValue, backgrColor, opacityColor)
  .color-block
    .color__sample(style= 'background: '+backgrColor+'; opacity: '+opacityColor+'')
    .color__description
      h2.color__colorName= colorName
      p.color__colorCode= colorValue

.colors
  +color("Dark Shade 100%","#1F2041", "#1F2041", "1")
  +color("Dark Shade 75%" ,"#1F2041", "#1F2041", ".75")
  +color("Dark Shade 50%" ,"#1F2041", "#1F2041", ".5")
  +color("Dark Shade 25%" ,"#1F2041", "#1F2041", ".25")
  +color("Dark Shade 5%"  ,"#1F2041", "#1F2041", ".05")
  +color("Purple"         ,"#BC9CFF", "#BC9CFF")
  +color("Green"          ,"#6FCF97", "#6FCF97")

Answer 1

Look here for an example of jade.