CODEWITHSUNDEEP
csssasscss-selectors
LeBlaireau
LeBlaireau

Reputation: 17467

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?

Upvotes: 3

Views: 671

Answers (1)

philipp
philipp

Reputation: 16515

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.

Upvotes: 1

Related Questions