如何在SCSS中表示CSS

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