Question

我有以下css。我希望将其转换为SCSS。

CSS

.thumbnail > img, .thumbnail a > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

我在SCSS中编写它的方式是否正确？

.thumbnail{
  img{

  }
  a{
    img{

    }
  }
}

Answer 1

没有

您已使用后代选择器替换了所有子组合子，并放弃了所有规则。

您的原始CSS可以正常使用SCSS：

.thumbnail > img, .thumbnail a > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

你可以通过拉出类选择器来缩短它：

.thumbnail {
    &> img,
    a > img {
        display: block;
        max-width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
}

Answer 2

就您问题中的代码而言，您只是忘记了您的儿童组合子（>）

.thumbnail {
  > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  a {
    > img {
      display: block;
      max-width: 100%;
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

然而，它可能要短得多，请参阅昆汀的回答。

Answer 3

它应该是这样的：

.thumbnail {
  > img, a > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

尝试使用在线转换器。

如何在SCSS中表示CSS

3 个答案: