File tree Expand file tree Collapse file tree 1 file changed +0
-61
lines changed Expand file tree Collapse file tree 1 file changed +0
-61
lines changed Original file line number Diff line number Diff line change @@ -334,64 +334,3 @@ $SCREEN_SM_MAX: "max-width: 767px";
334
334
}
335
335
}
336
336
```
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
- ```
You can’t perform that action at this time.
0 commit comments