css - 带有@at-root的另一个选择器的SASS父选择器

Question

我有:

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


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

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

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

无需重复 Logo 名称。我有很多 Logo 名称。类似于下面的代码没有按预期工作

.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

Answer 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 的最佳用例。