Chunky Chunk
Chunky Chunk

Reputation: 17237

SASS :last-of-type pseudo-class from within a nested selector

In the Sass code below, how can I move the &:last-of-type code inside &-description so to avoid having to repeat nesting.

Working code: https://jsfiddle.net/njc2txk1/

HTML Code:

<ul class="list">
    <li class="row">
        <div class="row-info">
            Info 1
            <div class="row-info-description">
                Description 1
            </div>
        </div>
    </li>
    
    <li class="row">
        <div class="row-info">
            Info 2
            <div class="row-info-description">
                Description 2
            </div>
        </div>
    </li>
    
    <li class="row">
        <div class="row-info">
            Info 3
            <div class="row-info-description">
                Description 3
            </div>
        </div>
    </li>
</ul>

Sass Code:

.row {
    
    border: 4px solid red;
    color: white;
    font-size: 20px;
    
    &-info {
        
        background-color: #444444;
        
        &-description {
            
            background-color: #666666;
            font-size: 12px;
            
            //Access :last-of-type here?
        }
    }
    
    //The following works, but I want it moved into &-description

    $ROW: &;

    &:last-of-type {

        #{$ROW}-info {

            &-description {

                background-color: blue;
            }
        }
    }
}

Upvotes: 1

Views: 247

Answers (1)

k123
k123

Reputation: 428

SASS code

.row {
    
    border: 4px solid red;
    color: white;
    font-size: 20px;
    
    &-info {
        
        background-color: #444444;
        
        &-description {
            
            background-color: #666666;
            font-size: 12px;
            
            //Access :last-of-type here?
            .row:last-of-type &   {
                background-color: blue;
            }
        }

    }

}

Upvotes: 1

Related Questions