繁体   English   中英

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

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

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

工作代码: 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>

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?
        }
    }
    
    //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;
            }
        }

    }

}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM