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

Posted 2023-03-06

【中文标题】使用 Sass 将父选择器附加到末尾

【英文标题】：Append the parent selector to the end with Sass

【发布时间】：2013-04-13 01:15:33

【问题描述】：

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

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

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

.social-media 

    /* ... */

    .twitter  
        /* ... */
    
    .facebook 
        /* ... */
    

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

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

【问题讨论】：

您需要考虑重新考虑命名事物的方式。为什么你有一个类 social-media 的元素，然后在它里面有一个具有相同类名的无序列表？

@zakang 你没有正确理解。一般来说，我为 .social-media 元素定义了一些样式。然后，我想通过.social-media 类将一些特定样式应用于UL 元素。我的代码中没有像 .social-media ul.social-media 这样的东西，就像你暗示的那样。

我的错，扫码太多，阅读量不够:)

【参考方案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 
  /* ... */

【讨论】：

这就是我所害怕的......令人难以置信的是，你可以从你的 sass 中调暗和调亮颜色，而你不能做这样的事情。感谢您的回答！

这与使用& 不是简单的字符串替换有关。如果您的父选择器是 ul.foo，那么您最终可能会选择 ulul.foo。

hm...此解决方案在 sassmeister 上运行良好，但在我的本地，与 sassmeister 使用相同版本的 sass，这给了我一个错误:(

@AdrianFlorescu 检查您的依赖关系。如果你有正确的版本，你可能有一个依赖于旧版本的库。 sass --version 命令只会报告你安装的最新版本，而不是所有版本。

@cimmanon，你是对的，我有一个旧版本的指南针，它依赖于 sass o~> 3.3.0.rc.1 所以....不确定我是否能够为此升级。感谢您的回答！