Как можно улучшить этот SCSS код, оператор & после класс?

Question

[Александр]

Код который есть. А ниже будет пример как бы я хотел сделать, чтобы не дублировать код.

.main{
           .active~.search-results-live {
                visibility: visible;
            }

            .search-results-live {
                position: absolute;
                left: 0;
                right: 0;
                top: 100%;
                max-height: 600px;
                overflow-y: auto;
                margin: 0;
                font-size: 16px;
                line-height: 34px;
                text-align: left;
                z-index: 998;
                opacity: 0;
                visibility: hidden;

                & #search-results {
                    padding: 16px 12px 12px;
                    border: 1px solid #ececee;
                    border-radius: 0 0 3px 3px;
                    color: #888;
                    background: #fff;
                }
            }
            }

Так бы хотелось и кажется верным. Но не работает.

.main{

            .search-results-live {
                position: absolute;
                left: 0;
                right: 0;
                top: 100%;
                max-height: 600px;
                overflow-y: auto;
                margin: 0;
                font-size: 16px;
                line-height: 34px;
                text-align: left;
                z-index: 998;
                opacity: 0;
                visibility: hidden;

               .active~& {
                         visibility: visible;
               }

                & #search-results {
                    padding: 16px 12px 12px;
                    border: 1px solid #ececee;
                    border-radius: 0 0 3px 3px;
                    color: #888;
                    background: #fff;
                }
            }
            }

Comments

[Ankhena]

https://css-tricks.com/snippets/sass/caching-curre...

Вашу разметку могу только предполагать исходя из селекторов в css.
Всё получится, если вы начнете использовать БЭМ
https://jsfiddle.net/073v8a4k/

[Александр]

Ankhena, спасибо, я даже не подумал о таком простом решении !

[Ankhena]

Александр, Приятно слышать :)

Answer 1

[sergski]

Не работает, потому что результат такой записи .active~& будет

.active ~ .main .search-results-live{visibility:visible}