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

您可以使用＆符来修复此

e.g。

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

会变成

image.someclass {
   margin: 10px;
}

SCSS嵌套正在寻找一个孩子

1 个答案: