Point # 1: So with this loop, what is the css going to be generated? Looks like this will create more vas than simple media query, because in most of the cases, we dont need to define a lot of queries, but just 1 or 2 break points. So in the final das, its not saving some lines of code, but in reason the same.
Point #2: Building time, with this loop building time is going to more for SCSS than simple media query.
I prefer to keep things simple and would reject such code in my code review.
This blog is designed to stop code repetition. Let's say we need 5 media queries to change values of the same property. For example, we need the font-size on 5 screen sizes to be 10px, 20px, 30px, 40px, 50px. We input the values in a map, and then we use a loop, just like the one in the blog.
Point # 2 :
If you need to change a single property, in 1 media query(screen size) then just write like this. @include
query(pick_a_display_name_from_$bp){
font-size : 25px;
}
I updated this at the post at "BUT..." section.
Thank You for the feedback. Happy Coding ❤️️
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Point # 1: So with this loop, what is the css going to be generated? Looks like this will create more vas than simple media query, because in most of the cases, we dont need to define a lot of queries, but just 1 or 2 break points. So in the final das, its not saving some lines of code, but in reason the same.
Point #2: Building time, with this loop building time is going to more for SCSS than simple media query.
I prefer to keep things simple and would reject such code in my code review.
Point # 1 :
This blog is designed to stop code repetition. Let's say we need 5 media queries to change values of the same property. For example, we need the font-size on 5 screen sizes to be 10px, 20px, 30px, 40px, 50px. We input the values in a map, and then we use a loop, just like the one in the blog.
Point # 2 :
If you need to change a single property, in 1 media query(screen size) then just write like this.
@include query(pick_a_display_name_from_$bp){
font-size : 25px;
}
I updated this at the post at "BUT..." section.
Thank You for the feedback. Happy Coding ❤️️