DEV Community

Discussion on: DRY Approach to CSS Sizing for Media Queries

View post
Collapse
 
markewers profile image
Mark Ewers • • Edited

I see what you're doing and it's a good practice. But your first example is SCSS and the 2nd is CSS. So I wonder if the comparison is apt. Rewriting your 2nd example in SCSS seems like the right comparison to make.

$padding: 12px;

@media screen and (min-width: 768px) {
  $padding: 16px;
}

@media screen and (min-width: 1024px) {
  $padding: 20px;
}

.element {
  padding: $padding;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jackkeller profile image
Jack Keller •

Their both in SCSS, the second example has variables in the mix for comparison. If it was pure CSS the nesting wouldn't work as desired for the mediaqueries. I can try your example above but the nature of preprocessed variables is that they cannot generally be overwritten in such a way.

Collapse
 
markewers profile image
Mark Ewers • • Edited

You are right! Not only that but I completely missed that point about no overwriting. TIL. So I'm glad I posted. And thanks for the follow up.