Blocco di codice in SCSS apparso sul forum di SkillsAndMore (https://skillsandmore.org)

header.scss

/*** BEGIN HEADER ***/

header#masthead {
    background-color: #00BD9C;
    border-bottom: 10px solid #0e6152;
    height: 117px;
    clear: both;
    margin-bottom: 20px;
}

#logo { margin-left: 20px; }

.menu {

    ul {
        list-style-type: none;
    }

    li {
        display: inline-block;
        line-height: 80px;
    }

}

.site-branding {
    width: 50%;
    float: left;
}

#site-navigation {
    width: 50%;
    float: right;
    max-height: 115px;

    #home {
        background: url(../../images/m_home.png) no-repeat center left;
    }

    #chi-siamo {
        background: url(../../images/m_chi-siamo.png) no-repeat center left;
    }

    #news {
        background: url(../../images/m_news.png) no-repeat center left;
    }

    #contatti {
        background: url(../../images/m_contatti.png) no-repeat center left;
    }

    a {
        color: #fff;
        display: inline-block;
        margin: 0 10px;
        padding-left: 32px;
        font-size: 20px;
        text-decoration: none;
    }

    li.current_page_item {
        background-image: url(../../images/m_home_a.png);

        a {
            color: #0e6152;
        }
    }

}

li#chi-siamo.current_page_item { background-image: url(../../images/m_chi-siamo.png); }
li#news.current_page_item { background-image: url(../../images/m_news.png); }
li#contatti.current_page_item { background-image: url(../../images/m_news.png); }

/*** END HEADER ***/ˇ

indentazione-id.scss

li{
    &#chi-siamo.current_page_item { 
      background-image: url(../../images/m_chi-siamo.png); 
    }
    &#news.current_page_item { 
      background-image: url(../../images/m_news.png); 
    }
    &#contatti.current_page_item { 
      background-image: url(../../images/m_news.png); 
    }
}

utilizzo-avanzato-each.scss

$ids: chi-siamo news contatti;

@each $id in $ids{
  li##{$id}.current_page_item{
    background-image: url(../../images/m_#{$id}.png); 
  }
}