CODEWITHSUNDEEP
css
Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

How to represent CSS in SCSS

I've got the following css. I wanted this to convert to SCSS.

CSS

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

Is it correct the way I've written it in SCSS? 

.thumbnail{
  img{

  }
  a{
    img{

    }
  }
}

Upvotes: 1

Views: 60

Answers (3)

Kamil
Kamil

Reputation: 286

It should look like this:

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

Try using online converters.

Upvotes: 0

Jesse
Jesse

Reputation: 3632

As far as the code in your question is concerned, you just forgot your child combinators (>)

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

However, it could be a lot shorter, see Quentin's answer.

Upvotes: 1

Quentin
Quentin

Reputation: 943615

No.

You've replaced all the child combinators with descendant selectors and discarded all of the rules.

Your original CSS will work just fine as SCSS:

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

You could make it marginally shorter by pulling out the class selector:

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

Upvotes: 5

Related Questions