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;
@ 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:
@ 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.
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.
Maybe in @ text-color-dark: # 353535 instead of @ you need $