Skip to content

Commit cc76641

Browse files
committed
Remove media query revoking section
It's a little confusing.
1 parent 1e9cbd2 commit cc76641

File tree

1 file changed

+0
-61
lines changed

1 file changed

+0
-61
lines changed

README.md

Lines changed: 0 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -334,64 +334,3 @@ $SCREEN_SM_MAX: "max-width: 767px";
334334
}
335335
}
336336
```
337-
338-
Avoid revoking declarations in media queries
339-
340-
```scss
341-
// ----------------
342-
// Bad code:
343-
// ----------------
344-
.selector {
345-
display: inline-block;
346-
padding: 16px 20px;
347-
width: 50%;
348-
border: 1px solid color(blue, light);
349-
350-
@media only screen and ($SMALL_BELOW) {
351-
display: block;
352-
padding: 12px 16px;
353-
width: initial; // bad: forced to reset properties not used in this query
354-
}
355-
}
356-
357-
// Output:
358-
@media only screen and (min-width: 800px) {
359-
.selector {
360-
display: inline-block;
361-
padding: 16px 20px;
362-
width: 50%;
363-
border: 1px solid #5eb0f0;
364-
display: block;
365-
padding: 12px 16px;
366-
width: initial;
367-
}
368-
}
369-
370-
// ----------------
371-
// Good code:
372-
// ----------------
373-
.selector {
374-
border: 1px solid color(blue, light);
375-
376-
@media only screen and ($SMALL_BELOW) {
377-
display: block;
378-
padding: 12px 16px;
379-
width: auto;
380-
}
381-
382-
@media only screen and ($SMALL_ABOVE) {
383-
display: inline-block;
384-
padding: 16px 20px;
385-
}
386-
}
387-
388-
// Output:
389-
@media only screen and (min-width: 800px) {
390-
.selector {
391-
display: block;
392-
padding: 12px 16px;
393-
width: initial;
394-
border: 1px solid #5eb0f0;
395-
}
396-
}
397-
```

0 commit comments

Comments
 (0)