Best Practise write CSS with SCSS for website responsive [closed] - css

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
When I want to create a responsive website, say there are two devices with different screen.
What should I create #media screen {} for different file, like code below:
#media screen and (min-width: 676px) {//Some code here}
or write #media screen {} directly for same file?. This example my code:
.home {
.container {
padding: 10px 0 20px 0;
#media screen and (max-width: 480px) {
padding: 2px 0 10px 0
}
}
}
And please include examples as my reference material.
Thanks.

Answer 1

You can try one of the below approaches:
Use one media query for all elements that will be added it the
bottom of your scss file.
Add each media query with it's element, like you did. I don't prefer
that approach because it will make it harder to find/edit your code
when working on large projects.
Example 1
.section--about {
text-align: center;
p {
color: #727272;
}
}
#include mobile {
.section--about {
p {
font-size: 1.5em;
}
}
}
Exmple 2
.section--about {
text-align: center;
p {
color: #727272;
}
#include mobile {
p {
font-size: 1.5em;
}
}
}
Further reading:
Approaches to Media Queries in Sass
Sass Guidelines
Write Better Media Queries with Sass
Media Queries mixins for Sass