来自另一个带有 @at-root 的选择器的 SASS 父选择器答案

【问题标题】：SASS Parent selector from another selector with @at-root来自另一个带有 @at-root 的选择器的 SASS 父选择器
【发布时间】：2014-12-02 02:17:23
【问题描述】：

我有：

.parent {
   &.change {
     .logo {
       width:100px;
     }
   }
}


.logo {
  &.logo--one {
    border:1px solid #ccc;
  }
  &.logo--two {
    border:1px solid #ddd;
  }  
  &.logo--tree {
    border:1px solid #fff;
  }  
}

我希望能够从每个徽标名称内部更改选择器，例如

.parent.change .logo.logo--one {}

无需重复徽标名称。我有很多标志名称。类似于下面的代码不能按预期工作

.logo {
  &.logo--one {
    border:1px solid #ccc;
    @at-root .what__should__be__here {
      width:100px;
    }
  }
  &.logo--two {
    border:1px solid #ddd;
    @at-root .what__should__be__here {
      width:100px;
    }
  }  
  &.logo--tree {
    border:1px solid #fff;
    @at-root .what__should__be__here {
      width:100px;
    }
  }  
}

我想你可以在这里玩：http://sassmeister.com/gist/21b2886c6a572446684c

【问题讨论】：

标签： css sass

【解决方案1】：

我错过了&（这不是很直观，但很有效）。我在这里找到了解决方案：http://davidwalsh.name/future-sass

这是结果：http://sassmeister.com/gist/9ebc671927a4dacd6405

.parent {
   &.change {
     .logo {
       width:100px;
     }
   }
}


.logo {
  &.logo--one {
    border:1px solid #ccc;
    @at-root .parent.change & {
      width:100px;
    }
  }
  &.logo--two {
    border:1px solid #ddd;
    @at-root .parent.change & {
      width:120px;
    }
  }  
  &.logo--tree {
    border:1px solid #fff;
    @at-root .parent.change & {
      width:130px;
    }
  }  
}

这是迄今为止我发现的@at-root 的最佳用例。

【讨论】：