как использовать селектор дедушки в scss

Question

Мне нужно стилизовать мой компонент кнопки в 5 состояниях с разноцветным значком и использовать для этого следующее css

#add-member-dialog #add-username-to-list .to-list-button-icon:before {
    content: url("../images/func_personplus_16_ena.png");
}
#add-member-dialog #add-username-to-list:hover .to-list-button-icon:before {
    content: url("../images/func_personplus_16_hov.png");
}
#add-member-dialog #add-username-to-list:disabled .to-list-button-icon:before {
    content: url("../images/func_personplus_16_dis.png");
}
#add-member-dialog #add-username-to-list:active .to-list-button-icon:before {
    content: url("../images/func_personplus_16_act.png");
}
#add-member-dialog #add-username-to-list:active:hover .to-list-button-icon:before {
    content: url("../images/func_personplus_16_onb.png");
}

такие элементы отличаются псевдоклассами, связанными с # add-username-to-list. Я пытался превратить весь файл CSS в scss и хотел оптимизировать этот стиль, но я не смог продвинуться дальше:

#add-member-dialog {
  #add-username-to-list {
    .to-list-button-icon:before {
      content: url("../images/func_personplus_16_ena.png");
    }
    &:hover .to-list-button-icon:before {
      content: url("../images/func_personplus_16_hov.png");
    }
    &:disabled .to-list-button-icon:before {
      content: url("../images/func_personplus_16_dis.png");
    }
    &:active .to-list-button-icon:before {
      content: url("../images/func_personplus_16_act.png");
    }
    &:active:hover .to-list-button-icon:before {
      content: url("../images/func_personplus_16_onb.png");
    }
  }
}

Можно ли сделать что-то подобное?

#add-member-dialog {
  #add-username-to-list {
    .to-list-button-icon:before {
      content: url("../images/func_personplus_16_ena.png");

      &&:hover & {
        content: url("../images/func_personplus_16_hov.png");
      }
      ...
    }
  }
}

где && обозначает дедушкин селектор #add-username-to-list.

Я также пытался применить шаблон #{$grandparent}:tmp $, но селектор результатов выглядел так: #add-member-dialog #add-username-to-list:tmp #add-member-dialog #add-username-to-list .to-list-button-icon:before

#add-member-dialog {
  #add-username-to-list {
    $grandparent: &;

    .to-list-button-icon:before {
      content: url("../images/func_personplus_16_ena.png");

      #{$grandparent}:hover & {
        content: url("../images/func_personplus_16_hov.png");
      }
      ...
    }
  }
}

Любой совет, возможно ли это?

Answer 1

Вы можете использовать интерполяцию, чтобы распечатать селектор дедушки (обратите внимание на @ в корне):

#add-member-dialog {
    #add-username-to-list {
        $g: &;                               // grandparent
        $p: '../images/func_personplus_16_'; // icon path
        @at-root {
            .to-list-button-icon:before { 
                #{$g} &          { content: url(#{$p}ena.png); }                
                #{$g}:hover &    { content: url(#{$p}hov.png); }
                #{$g}:disabled & { content: url(#{$p}dis.png); }
                #{$g}:active &   { content: url(#{$p}act.png); }                
                #{$g}:active:hover &   { content: url(#{$p}onb.png); }                                
            }
        }
    }
}