【问题标题】:SASS :last-of-type pseudo-class from within a nested selectorSASS:嵌套选择器中的最后一个类型的伪类
【发布时间】:2020-12-08 01:39:29
【问题描述】:

在下面的 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>

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

【问题讨论】:

    标签: javascript html css sass css-selectors


    【解决方案1】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-12-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-01-15
      • 2018-07-31
      • 1970-01-01
      • 2016-04-17
      相关资源
      最近更新 更多