How to choose a secondary ancestor or even tertiary ancestor in sass?

user_17515207 0
Viewed 43

Here is my html code

<body>
    <div>

        <li class="more">hello
            <ul class="hello">
                <li>hello</li>
                <li>hello</li>
                <li>hello</li>
                <li>hello</li>
                <li>hello</li>
            </ul>
        </li>


    </div>

</body>

and i want to generate some css like this

.hello { display: none; }

.more:hover .hello { display: block; }

my scss

.more{

    .hello{
        display: none;
    }
    
    &:hover .hello{
        display: block;
    }
}

Is there any way to be more concise instead of the selector &:hover .hello{} ?

sass css
1 Answers

The @at-root rule could be used for this purpose.

The @at-root rule is usually written @at-root { ... } and causes everything within it to be emitted at the root of the document instead of using the normal nesting. It's most often used when doing advanced nesting with the SassScript parent selector and selector functions.

More information: https://sass-lang.com/documentation/at-rules/at-root

.more{
    @at-root .hello{
        display: none;
    }
    
    &:hover .hello{
        display: block;
    }
}
user_155640950
Related