LeBlaireau LeBlaireau - 3 months ago 16
Sass (Sass) Question

Sass pattern for traversing up the tree

I have the following SASS structure

.entry {
//some styles here
.banner {
border:4px solid red;
.position {
display: inline-block;
}
}
}


And in html

<div class="entry">
<div class="banner>
<div class="position"></div>
</div>
</div>


Now I want to change the style of .banner and .position when an extra class is added to the entry.

<div class="entry team1">
<div class="banner>
<div class="position"></div>
</div>
</div>


This is a problem I have encountered lots of times and have never found a clean way to do it, the & operator or the @extend could be options but ideally I would like to group all the styles which have the same class.

Any suggestion on how I could write this pattern as efficiently as possible would be appreciated?

Answer

Well I would suggest something like that:

.entry {
    .banner { /* defaults */ }


    &.team1 {
        .banner { 
            /* changes */ 
            .position { /*changes */}
        }
    }

}

As far as I know, it is not possible to »traverse up the tree« in css, so it wont in scss either.

Another thing that comes to my mind is the @at-root what moves the rule to the root of the generated css. But all in all this will result in a »global« class definition, so I guess that is not what you want.

Comments