{"id":1529,"date":"2020-06-05T15:21:37","date_gmt":"2020-06-05T08:21:37","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=1529"},"modified":"2020-06-21T09:50:26","modified_gmt":"2020-06-21T02:50:26","slug":"better-sass-media-query","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/better-sass-media-query\/","title":{"rendered":"Using Sass Mixin for Media Query Is Wrong (Here\u2019s a Better Way)"},"content":{"rendered":"\n

Every Sass tutorial on the internet will teach you to use mixin for media queries. Why though? All it does is adding unnecessary abstraction<\/strong>.<\/p>\n\n\n\n

Why not use the built-in @media<\/code> block?<\/p>\n\n\n\n

Most people say it’s because you can’t use variables in it. Or have to resort to the dirty concatenate syntax like this @media (min-width: #{ $size })<\/code>.<\/p>\n\n\n\n

But there is actually a simple way that solves both those problems<\/strong>. Let’s see how!<\/p>\n\n\n\n

Step 1: Create Breakpoint Variables<\/h2>\n\n\n\n

Decide on your breakpoints and create 2 variables for each of them. One for below that size and the other one for above it:<\/p>\n\n\n\n

\/\/ Extra Small (mobile)\n$below-xs: \"max-width:480px\";\n$above-xs: \"min-width:481px\";\n\n\/\/ Small (tablet)\n$below-s: \"max-width:768px\";\n$above-s: \"min-width:769px\";\n\n\/\/ Medium (landscape tablet)\n$below-m: \"max-width:960px\";\n$above-m: \"min-width:961px\";\n\n\/\/ Large (content max-width)\n$below-l: \"max-width:1120px\";\n$above-l: \"min-width:1121px\";<\/code><\/pre>\n\n\n\n
Make some special breakpoints too:<\/p>\n\n\n\n
$portrait: \"orientation: portrait\";\n$landscape: \"orientation: landscape\";\n$retina: \"min-resolution: 192dpi\";<\/code><\/pre>\n\n\n\n
Step 2: Use @media with Parentheses<\/h2>\n\n\n\n
body {\n  color: black;\n  \n  @media ($below-xs) {\n    color: green;\n  }\n}<\/code><\/pre>\n\n\n\n
You can even combine two conditions just like normal @media<\/code> block:<\/p>\n\n\n\n
body {\n  color: black;\n  \n  @media ($above-s) and ($below-m) {\n    color: red;\n  }\n  @media ($below-m) and ($landscape) {\n    color: yellow;\n  }\n}<\/code><\/pre>\n\n\n\n
That’s it!<\/strong> Much cleaner than using fancy mixins right?<\/p>\n\n\n\n
Step 3 (Optional): Create Function for Extra Flexibility<\/h2>\n\n\n\n
In case you need a one-time-use breakpoint, you can create these functions:<\/p>\n\n\n\n
@function below( $size-px ) {\n  @return \"max-width: #{$size-px}\";\n}\n\n@function above( $size-px ) {\n  @return \"min-width: #{$size-px}\";\n}<\/code><\/pre>\n\n\n\n
Then you can use it within the parentheses:<\/p>\n\n\n\n
body {\n  font-size: 18px;\n\n  @media (below(300px)) {\n    font-size: 14px;\n  }\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n
Conclusion<\/h2>\n\n\n\n
I believe this is the best way to use media query in Sass. It doesn\u2019t hide any abstraction behind mixin, easier to grasp, and looks tidier.<\/p>\n\n\n\n
Oh, and I made a CODEPEN<\/a> if you want to experiment around with this newfound trick.<\/p>\n\n\n\n
Let me know what you think in the comment below \ud83d\ude42<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Every Sass tutorial on the internet will teach you to use mixin for media queries. Why though? All it does is adding unnecessary abstraction.<\/p>\n","protected":false},"author":1,"featured_media":1531,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[21,43],"class_list":["post-1529","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-css","tag-sass"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1529"}],"version-history":[{"count":9,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1529\/revisions"}],"predecessor-version":[{"id":1560,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1529\/revisions\/1560"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1531"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}