How to rebuild the tree in Media queries?

Question

css

I type in Sass. There is such a structure. (For example)

.main
  .content
    .column
      &.left
        .messages
          .message
                padding-top: 150px

To change the padding of img with "@Media" you need to repeat the entire structure and already change the value. But if at a certain resolution only 1 property should change and do it without a tree ...

@media screen and (max-width: 767px)
    .message
        padding-top: 100px

...property will not change (do not apply).
Is it possible in Sass to make structure persist?

Answer 1

If I understand you correctly, then SASS has nothing to do with it. Read up on CSS selector specificity (it's easy to google). As a last resort, you could use !important in your situation, but that's only if you understand why you're doing it and there's some sort of system for using it throughout the project.
But it would be wiser to use methodologies like the popular BEM or the not-so-popular RSCSS. This will be a much better solution than trying to hack one bad guy for another.

Answer 2

So much nesting of styles is not always a good thing. Try BEM. And about the weight of selectors, be sure to read
important - evil. Write the tree again.