How to do it in rscss methodology?

Question

css

Recently got acquainted with rscss . It's a bit confusing that I can only get the child element. How to rewrite it in rscss, how to get .link correctly ?

Answer 1

Well, actually, not only the child is possible - rscss.io/css-structure.html#avoid-over-nesting , but if you want to avoid such nesting in CSS, then you can simply make the link with the wrapper a separate component, something like this:

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;
        }
    }
}