用Sass将父选择器追加到末尾 [英] Append the parent selector to the end with Sass

问题描述

好的，假设我有以下传统CSS

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

因此，我尝试使用SCSS这样做：

.social-media {

    /* ... */

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

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

最后一部分不起作用，因为它似乎应该只出现在选择器的开头。是否有解决办法？

推荐答案

SASS3.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 {
  /* ... */
}

这篇关于用Sass将父选择器追加到末尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！