Css 来自另一个选择器的SASS父选择器，根为@

我有：

我想从每个标志名称的内部能够改变一个选择器，如

.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;
    }
  }  
}

.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;
    }
  }  
}