SASS：嵌套选择器中的最后一个伪类

问题描述

在下面的Sass代码中，如何在&:last-of-type内移动&-description代码，以避免重复嵌套。

工作代码：https://jsfiddle.net/njc2txk1/

HTML代码：

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

密码：

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

解决方法

SASS代码

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

    }

}