Задать вопрос
devellopah
@devellopah
css

Как сделать это в методологии rscss?

Недавно познакомился с rscss. Немного смущает, что я только могу достать дочерний элемент. Как это переписать в rscss, как правильно достать .link?
  • Вопрос задан
  • 757 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Ну вообще-то можно не только дочерний - rscss.io/css-structure.html#avoid-over-nesting, но если вы хотите избежать такой вложенности в CSS, то можно просто сделать ссылку с оберткой отдельным компонентом, как-нибудь так:
nav.main-navigation
    ul.links-list
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link


.main-navigation {
    // ...
}

.links-list {
    display: flex;
    justify-content: center;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}


.wrapped-link {
    flex-basis: 20%;
	
    > .link {
        display: block;
        padding: 15px;
        text-align: center;
        text-decoration: none;
		
        &:hover,
        &:focus {
            text-decoration: none;
            background-color: #333;
        }
    }
}
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Frontend React
Glob-com
от 100 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка дизайна раздела «Статьи» на сайте «Мир отходов»
23 апр. 2024, в 23:01
10000 руб./за проект
Дизайн личного кабинета (клиентская часть)
23 апр. 2024, в 22:37
500 руб./в час
Скрипт для Solana быстрый
23 апр. 2024, в 22:33
25000 руб./за проект
Ещё заказы