I will correct the question:

There is a header with numbers and a button:

& lt; body & gt;
 & lt; header class = "header" & gt;
  & lt; div class = "header-contacts" & gt;
   & lt; div class = "header-contacts__phone" & gt; 8 (123) 000-00-00 & lt; / div & gt;
   & lt; div class = "header-contacts__phone" & gt; 8 (123) 000-00-00 & lt; / div & gt;
   & lt; button class = "header-contacts__button" & gt; Request a call & lt; / button & gt;
  & lt; / div & gt;
 & lt; / header & gt;
& lt; / body & gt;

Styles “style.sass”:

@ import: 'header'
@import: 'variable'

Header style file “_header.sass”:

. header
 padding-top: 50px
 & amp; -contacts
  display: flex
  justify-content: flex-end
  & amp; __ phone
   font-size: 22px
   & amp; __ button
    font-size: 14px
    color: $ text-color-dark

And a separate file with variables, which is included in the style.sass file:

“_variable.sass”:

@ text-color-dark: # 353535

And gulp should collect it all into a css file without any problems (at least it did before).
And now he starts to swear:

Error in plugin "sass"
Message:
  src \ sass \ _header.sass
Error: Undefined variable: "$ text-color-dark".
    on line 11 of src / sass / _header.sass
    from line 6 of src / sass / style.sass
& gt; & gt; color: $ text-color-dark; }}}

Sorry if the question turned out to be long, but I don’t know how to explain it otherwise.

Answer 1

Variables must be declared directly in the sass file, or in a file included with your file. Apparently, gulp, or rather the sass compiler, swears that you have none in the file in which you use these variables. I also want to note that according to the standards, tab is used for tabs, well, or 4 spaces, but not 1. Syntax highlighting does not signal anything, especially since you have an editor, not an IDE, as you said yourself.

Answer 2

Maybe in @ text-color-dark: # 353535 instead of @ you need $