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

我希望从每个徽标名称的内部能够更改像

这样的选择器

.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

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

使用@ at-root从另一个选择器获取SASS父选择器

1 个答案: