Вопрос по scss. Почему такая вложенность?

Question

[Денис Сопко]

Есть блок с классом "header" и дочерний блок с классом "wr". Смотрю сейчас видео по верстке страницы на scss (не важно зачем) и вот в чем вопрос. Я только-только начал изучать sass/scss и знаю, чтобы обратиться к дочернему элементу блока "header", то можно обратиться вот так:

.header{
    code...
        .wr{
        width: 110px;
        }
}

============================================================
А вот у автора видео написано вот так:

.header{
    code...
        &>.wr{
        width: 110px;
        }
}

====================
Знаю, что знак амперсанда - это привяска строки(символов) к родительскому элементу, но почему так? Здесь ведь не нужна привязка. Нужно ведь было написать так, как первый вариант

Comments

[Moskus]

А теперь представьте, что у автора есть ещё кусок кода, где элемент с классом .wr находится внутри header, но не вложен непосредственно в него. Ровно этим и плох процесс "обучения" по видео - вы оказываетесь слишком сфокусированы на конкретном примере, когда нужно сначала понять общий принцип, а потом переходить к частностям.

Answer 1

[Иван Корюков]

В первом варианте получается что элемент с классом wr может быть как угодно глубоко внутри хедера.
Во втором - только непосредственно в хедере, но не в дочерних элементах хедера.

Возможно начинать вложенный элемент с > нельзя, но это не точно.

А вообще тут вопрос уже к автору этого кода, потому что рабочих вариантов много, и первый тоже будет работать, но автор дополнительно задал такое ограничение, причём возможно просто перестраховался.

Comments

[Денис Сопко]

понял, спасибо.

Answer 2

[Yarchick]

Это обращение к .wr первой вложенности.

Тоже самое, что написать:

header > .wr {
   ...
}

Comments

[Денис Сопко]

а нельзя написать вот так?
header{
code...
>.wr
width: 200px;
}

[Yarchick]

Вроде бы можно с амперсантом и без него, это уже вопрос синтаксиса scss

[Денис Сопко]

Yarchick, спасибо за ответ без лишних вопросов)