Почему VS CODE не воспринимает вложенность в файле sass?

Про валидность верстки + валидатор в конце
БЭМ
Очень быстро про синтаксис Sass (плейлист)

Почему VS CODE не воспринимает вложенность в файле sass?

Iren-b, меньше div-ов, больше тэгов, подходящих для тех случаев, которые описывает Ваш документ:
для секций документа -- section, для списков -- ul/li, текста помещаем в p, а уже в нем используем i (и то в вашем случае можно обойтись и без i, и без p). Если приводить пример на живом коде, то:

<footer>
    <div class="footer__divider"></div>
    <section class="footer__wrapper">
        <ul class="footer__social-list">
            <li class="footer__social-item">
                <a href="#" class="footer__social-link">
                    <p class="fab fa-facebook-f">
                        <!-- Или вообще тег абзаца не использовать, а задать стили текста в <a> -->
                    </p>
                </a>
            </li>
            <li class="footer__social-item">
                <a href="#" class="footer__social-link">
                    <p class="fab fa-facebook-f">
                        <!-- Или вообще тег абзаца не использовать, а задать стили текста в <a> -->
                    </p>
                </a>
            </li>
            <li class="footer__social-item">
                <a href="#" class="footer__social-link">
                    <p class="fab fa-facebook-f">
                        <!-- Или вообще тег абзаца не использовать, а задать стили текста в <a> -->
                    </p>
                </a>
            </li>
        </ul>
        <section class="footer__links">
            <ul class="footer__links-list footer_links_main">
                <li>
                    <a href="#">на главную</a>
                </li>
                <li>
                    <a href="#">на главную</a>
                </li>
                <li>
                    <a href="#">на главную</a>
                </li>
            </ul>
            <ul class="footer__links-list footer_links_sub">
                <li>
                    <a href="#">на главную</a>
                </li>
                <li>
                    <a href="#">на главную</a>
                </li>
                <li>
                    <a href="#">на главную</a>
                </li>
            </ul>
            <a href="#" class="footer_links_lang">Русский</a>
        </section>
        <section class="footer__mobile">
            <ul class="footer__mobile-list">
                <li class="footer__mobile-item">
                    <a href="#">
                        <img src="img/link-1.png" alt="App Store">
                    </a>
                </li>
                <li class="footer__mobile-item">
                    <a href="#">
                        <img src="img/link-1.png" alt="App Store">
                    </a>
                </li>
                <li class="footer__mobile-item">
                    <a href="#">
                        <img src="img/link-1.png" alt="App Store">
                    </a>
                </li>
            </ul>
        </section>
    </section>
</footer>