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

Question

[Iren-b]

Здравствуйте! Подскажите, пожалуйста, почему VS CODE может не воспринимать вложенность в файле sass?
Формат файла верный - sass, сам код написан верно, но к странице сайта не применяется. Если переписать код в обычном синтаксисе css, без вложенности - всё работает. Код пишу в файле sass, далее компилирую в подключенный к html файл css с помощью плагина Live Sass Compiler. Если проверить скомпилированный файл, то этого участка там вообще нет или есть только часть.

<footer>
        <div class="footer_divider"></div>
        <div class="footer_wrapper">
            <div>
                <div class="footer_social">
                    <a href="#" class="footer_social_item">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="footer_social_item">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="footer_social_item">
                        <i class="fab fa-linkedin"></i>
                    </a>
                    <a href="#" class="footer_social_item">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
            </div>
            <div>
                <div class="footer_links">
                    <div class="footer_links_main">
                        <a href="#">на главную</a>
                        <a href="#">города</a>
                        <a href="#">для водителей</a>
                    </div>
                    <div class="footer_links_sub">
                        <a href="#">центр поддержки</a>
                        <a href="#">вакансии</a>
                        <a href="#">разработчики</a>
                        <a href="#">блог</a>
                        <a href="#">о нас</a>
                    </div>
                    <a href="#" class="footer_links_lang">Русский</a>
                </div>
            </div>
            <div>
                <div class="footer_mobile">
                    <a href="#">
                        <img src="img/link-1.png" alt="App Store">
                    </a>
                    <a href="#">
                        <img src="img/link-2.png" alt="Google play">
                    </a>
                    <a href="#">
                        <img src="img/link-3.png" alt="Windows store">
                    </a>
                </div>
            </div>
        </div>
    </footer>

.footer
  &_divider
    width: 299px
    height: 4px
    margin: 0 auto
    background-color: #1fbad6
  &_wrapper
    display: flex 
    justify-content: space-between
    align-items: flex-start
    padding-top: 32px
  &_wrapper > div 
    width: 33%
    &:nth-child(3)
      display: flex 
      justify-content: flex-end
    &_social
      width: 160px
      display: flex
      justify-content: space-between
    &_item
      display: flex 
      justify-content: center
      align-items: center
        width: 32px
        height: 32px
        margin: 0 4px
        background-color: #070716
        border-radius: 100%
      i
        color: #fff

Comments

[Сергей delphinpro]

Компилируется правильно. Это вы неправильно понимаете, как написать исходник.
И если бы вы выложили код текстом, как положено по правилам сайта, я бы его копирнул и показал как надо.

[Iren-b]

Сергей delphinpro, выложила код текстом. Буду благодарна, если покажете, как же всё таки надо.

[Сергей delphinpro]

Iren-b,

.footer
  &_divider
    width: 299px
    height: 4px
    margin: 0 auto
    background-color: #1fbad6
  &_wrapper
    display: flex 
    justify-content: space-between
    align-items: flex-start
    padding-top: 32px
  &_wrapper > div 
    width: 33%
    &:nth-child(3)
      display: flex 
      justify-content: flex-end
  &_social
    width: 160px
    display: flex
    justify-content: space-between
  &_item
    display: flex 
    justify-content: center
    align-items: center
    width: 32px
    height: 32px
    margin: 0 4px
    background-color: #070716
    border-radius: 100%
    i
      color: #fff

Видимо, так. Лишний отступ.
Как верно подметили ниже — зря вы взяли устаревший синтаксис.

[Iren-b]

Сергей delphinpro, действительно дело было в пробеле. Удивлена, что не заметила этого, видимо зациклилась и замылился глаз. Поправила код, всё работает. Большое спасибо, что обратили моё внимание на это!

Answer 1

[iBird Rose]

когда ты пишешь

.footer {
    &_divider {}
}

ты не создаешь вложенность. эта запись формирует код вида .footer_divider это sass так работает. ошибки нет.
если хочешь вложенность - то указывай ее явно. к примеру:

.footer {
    .footer_divider {}
}

Answer 2

[Vladimir Abdullaev]

Знаю, что комментарий не по существу, но зачем вам такой мощный инструмент, как Sass, если у Вас хромает основа всех основ - это качество разметки? Да, именно семантика. Помимо этого, вижу, что вы пытаетесь в БЭМ, однако нарушаете правила именования. В общем, как и Sass, БЭМ, скорее всего -- это излишний инструмент для этого проекта, исходя из контекста кода и Вашего навыка.

Искренне советую освоить какие-нибудь курсы по вёрстке, а-ля HTML Academy Профессиональная верстка сайтов и Препроцессоры и автоматизация.

P.S. Зря вы выбрали формат .sass. Лучшим вариантом был бы .scss, ибо он схож с CSS по синтаксису. Как и в CSS, в .scss вложенность происходит через {} и, а не отступами. Да-да, это значит, что, если вдруг срочно понадобится вставить девственный CSS, то .scss его обработает, а .sass скажет "гудбай"

Comments

[Iren-b]

Здравствуйте! Проект пишу именно в процессе прохождения курса, но, к сожалению, не имею связи с наставником, поэтому обратилась сюда.

Подскажите, пожалуйста, где именно по вашему мнению в коде хромает семантика? Поработаю над ошибками.

[Vladimir Abdullaev]

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>

[Vladimir Abdullaev]

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