SCSS嵌套正在寻找一个孩子

Question

我遇到了 SCSS 的问题，这可能只是因为缺乏经验。我正在尝试使我的stylesheet.scss 文件为具有特定类的任何图像提供样式，然后基于其他类具有更多样式，如下所示

SCSS：

img.postimage {
  height: 150px;

  .expand {
    transition: all .2s ease-in-out;
    &:hover {
      transform: scale(1.1);
    }
  }
}

烦人的是，这不会像下面这样编译 CSS：

img.postimage {
  height: 150px;
}

img.postimage.expand {
  transition: all .2s ease-in-out;
}

img.postimage.expand:hover {
  transform: scale(1.1);
}

它实际上是这样生成的：

img.postimage {
  height: 150px;
}

image.postimage .expand { /* note the space, it's actually looking for a .expand child */
  transition: all .2s ease-in-out;
}

image.postimage .expand:hover {
  transform: scale(1.1);
}

我不擅长 SCSS，所以我不知道我做错了什么。

Answer 1

你可以使用 & 来解决这个问题

例如

image {
   &.someclass {
      margin:10px;
   }
}

会变成

image.someclass {
   margin: 10px;
}