SCSS 嵌套正在寻找 child

Question

我在使用 SCSS 时遇到了问题，这可能只是因为缺乏经验。我试图让我的 stylesheet.scss 文件为具有特定 class 的任何图像提供样式，然后根据其他 class 提供更多样式，如下面的

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

SCSS 嵌套正在寻找 child

SCSS nesting is looking for a child

css

sass

compass-sass

compass