Добавить родительский селектор до конца с помощью Sass

Хорошо, предположим, что у меня есть следующий традиционный CSS

.social-media { /* ... */ }
.social-media .twitter { /* ... */ }
.social-media .facebook { /* ... */ }
ul.social-media { /* ... */ }

Итак, я попытался сделать это с помощью SCSS:

.social-media {

    /* ... */

    .twitter { 
        /* ... */
    }
    .facebook {
        /* ... */
    }

    // Here the problem:
    ul& {
        /* ... */
    }
}

Последняя часть не работает, потому что кажется, что амперсанд должен появляться только в начале селектора. Есть ли способ обхода?

Ответы

Ответ 1

Sass 3.2 и старше

Единственное, что вы можете сделать, это полностью изменить свое гнездование или нет:   .social-media {

    /* ... */

    .twitter { 
        /* ... */
    }
    .facebook {
        /* ... */
    }
}

ul.social-media {
    /* ... */
}

Sass 3.3 и более поздние версии

Вы можете сделать это с помощью интерполяции и директивы @at-root:

.social-media {
    /* ... */

    // Here the solution:
    @at-root ul#{&} {
        /* ... */
    }
}

Однако, если ваш родительский селектор содержит несколько селекторов, вам нужно вместо этого использовать selector-append:

.social-media, .doodads {
    /* ... */

    // Here the solution:
    @at-root #{selector-append(ul, &)} {
        /* ... */
    }
}

Вывод:

.social-media, .doodads {
  /* ... */
}
ul.social-media, ul.doodads {
  /* ... */
}