sass - 使用 Sass 将父选择器附加到末尾

Question

好吧，假设我有下面的传统 CSS

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

所以，我试着用 SCSS 这样做:

.social-media {

    /* ... */

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

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

最后一部分不起作用，因为和号似乎只应出现在选择器的开头。有解决方法吗？

Answer 1

Sass 3.2 及更早版本

你唯一能做的就是反转你的嵌套或者根本不嵌套: .社交媒体{

    /* ... */

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

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

Sass 3.3 及更高版本

您可以使用插值和 @at-root 指令来做到这一点:

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

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

但是，如果您的父选择器包含多个选择器，您将需要改用 selector-append:

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

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

输出:

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