使用Sass将父选择器追加到末尾

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

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

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

.social-media {

    /* ... */

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

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

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

Sass 3.2及更高版本 您唯一能做的就是反转嵌套或根本不嵌套： .社交媒体{

    /* ... */

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

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

Sass 3.3及更高版本 您可以使用插值和根目录下的

@指令执行此操作：

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

你需要考虑重新思考你命名事物的方式。为什么你有一个元素“代码<社会媒体< /代码>，然后里面有一个无序的列表，里面有相同的类名？@ ZAKAN你没有很好地理解它。一般来说，我有一些定义为社交媒体元素的样式。然后，我想应用一些特殊的ST。我的代码中没有像你所暗示的那样的
.social media UL.social media
。我的错误是，代码扫描太多，阅读不够：）这就是我害怕的……难以置信的是，你可以通过你的粗鲁行为来变暗和变亮颜色，而你不能这样做s、 感谢您的回答！这与使用
&
不是简单的字符串替换这一事实有关。如果您的父选择器是
ul.foo
，那么您可能会得到
ululull.foo
，如果是这样的话。嗯……这个解决方案在SassMesister上运行良好，但在我的本地，使用与SassMesister相同版本的sass，this给了我一个错误：（@AdrianFlorescu检查您的依赖关系。如果您有正确的版本，您可能有一个依赖于旧版本的库。
sass--version
命令将只报告您安装的最新版本，而不是所有版本。@cimmanon，您是对的，我有一个依赖于sass o~>3.3.0的旧版compass.rc.1所以…不确定我是否能够升级。谢谢你的回答！