SASS @ at-root с несколькими родительскими селекторами

Question

У меня небольшая проблема, и поиск пока не дал никаких результатов. Но это то, что продолжает появляться.

Я использую SASS для работы с корнем @ root, чтобы я мог использовать синтаксис BEM CSS.

Я получил следующее SCSS:

.cc_sidebar,.cc_popup{ 
    .btn{ 
     display: inline-block; 
     cursor: pointer; 
     @at-root{ 
      #{&}--icon{ 
       width: 25px; 
      } 
     } 
    } 
} 

Ожидаемый выход класса модификатора значок является:

.cc_sidebar .btn--icon,cc_popup .btn--icon{width: 25px;} 

Но вместо этого я получаю:

.cc_sidebar .btn, .cc_popup .btn--icon{width: 25px;} 

-icon не применяется к первому родительскому селектору. Должно быть? Или я не понимаю полную работу @ at-root?

Любые идеи или отзывы были бы весьма полезными.

И да, все это должно быть обернуто двумя родительскими селекторами.

Answer 1

Это, безусловно, ошибка в Sass, в последней версии (gem install sass --pre) код расширяется

.cc_sidebar .btn, 
.cc_popup .btn { 
    display: inline-block; 
    cursor: pointer; } 
    .cc_sidebar .btn, .cc_popup .btn--icon, .cc_sidebar .btn, .cc_popup .btn--icon { 
    width: 25px; } 

И вы можете увидеть дублируется .cc_sidebar .btn, .cc_popup .btn--icon .cc_sidebar .btn, .cc_popup .btn--icon часть, так это выглядит как ошибка.

Я действительно немного протестировал его, да, есть два ошибок на самом деле! Я заполнил их в вопросах Sass: https://github.com/nex3/sass/issues/1003 и https://github.com/nex3/sass/issues/1004, чтобы вы могли использовать свой код, когда они будут исправлены.

Поскольку проблема с несколькими селекторов, единственный способ не использовать их :(