Вложение SСSS: как добавить класс к предыдущему родительскому элементу

Question

Давайте посмотрим на этот пример:

.box {
    padding: 1rem;
    .item {
        paddding: 1rem;
        border: 1px solid #ccc;
        a {
           color: #000;
        }
    }
}

Я хочу добавить сюда новые правила с псевдоклассом. Как сделать это с помощью SCSS, чтобы получить этот вывод?

.box .item:first-child a:first-child {display: none;}
.box .item:last-child a:last-child {display: none;}

Я знаю, что могу использовать & родительский селектор, и он работает с <a/>, чтобы установить псевдокласс:

a {
    color: #000;
    &:first-child {
        display: none;
    }
}

Но что я должен сделать, чтобы установить псевдокласс на предыдущий родитель .item?

---

ОБНОВЛЕНИЕ

Есть ли способ сделать это без дублирования селекторов? Что-то вроде этого: a { color: #000; $parent(has:first-child) {display: none;} }

Answer 1

Вы должны создать для него определенные вложенные правила:

.box {
    padding: 1rem;
    .item {
        paddding: 1rem;
        border: 1px solid #ccc;
        a {
            color: #000;
        }
        &:first-child,
        &:last-child {
            a {
                &:first-child,
                &:last-child {
                    display: none;
                }
            }  
        }
    }
}

Я не верю, что это может быть рефакторинг.