{"id":1347,"date":"2021-05-30T17:18:41","date_gmt":"2021-05-30T11:48:41","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=1347"},"modified":"2021-05-30T18:00:07","modified_gmt":"2021-05-30T12:30:07","slug":"responsive-with-sass-mixin-use-breakpoint-on-if-condition","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/","title":{"rendered":"Responsive with SASS Mixin use breakpoint on if condition"},"content":{"rendered":"<p>Responsive with SASS Mixin use breakpoint on if the condition<\/p>\n<p>SCSS Code<\/p>\n<p>_mixins.scss code<\/p>\n<pre>@mixin response($breakpoint) {\r\n    @if($breakpoint == xl){\r\n        @media(max-width: 1200px){\r\n            @content;  \r\n        }\r\n    }\r\n    \r\n        @if($breakpoint == lg){\r\n        @media(max-width: 1000px){\r\n            @content;  \r\n        }\r\n    }\r\n    \r\n     @if($breakpoint == md){\r\n        @media(max-width: 768px){\r\n            @content;  \r\n        }\r\n    }\r\n}\r\n<\/pre>\n<p>Use mixin in other SCSS files<\/p>\n<pre>.first-nav{\r\n    grid-column: 7 \/ 10; \r\n    grid-row: 1 \/ 2; \r\n    @include navigation; \r\n    \r\n    @include response(xl){\r\n        grid-column: 6\/10; \/\/ @content\r\n    }\r\n    \r\n      @include response(lg){\r\n        grid-column: 5\/10; \/\/ @content\r\n    }\r\n    \r\n     @include response(md){\r\n        grid-column: 4\/10; \/\/ @content\r\n    }\r\n    \r\n}\r\n\r\n.second-nav{\r\n    grid-column: 1 \/10; \r\n    grid-row: 3\/4; \r\n    @include navigation; margin-top: 30px;  \r\n    \r\n     @include response(lg){\r\n        grid-column: 1\/10; \/\/ @content\r\n    }\r\n    \r\n      @include response(md){\r\n        grid-column: 1\/-1; \/\/ @content\r\n    }\r\n    \r\n    \r\n}<\/pre>\n<p>CSS Output<\/p>\n<pre>    @media (max-width: 1200px) {\r\n    .first-nav {\r\n      grid-column: 6\/10; } }\r\n  @media (max-width: 1000px) {\r\n    .first-nav {\r\n      grid-column: 5\/10; } }\r\n  @media (max-width: 768px) {\r\n    .first-nav {\r\n      grid-column: 4\/10; } }<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Responsive with SASS Mixin use breakpoint on if the condition SCSS Code _mixins.scss code @mixin response($breakpoint) { @if($breakpoint == xl){ @media(max-width: 1200px){ @content; } } @if($breakpoint == lg){ @media(max-width: 1000px){ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[43,44],"tags":[],"class_list":["post-1347","post","type-post","status-publish","format-standard","hentry","category-sass","category-scss"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Responsive with SASS Mixin use breakpoint on if condition - MyFreeOnlineTools<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive with SASS Mixin use breakpoint on if condition - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"Responsive with SASS Mixin use breakpoint on if the condition SCSS Code _mixins.scss code @mixin response($breakpoint) { @if($breakpoint == xl){ @media(max-width: 1200px){ @content; } } @if($breakpoint == lg){ @media(max-width: 1000px){ [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-30T11:48:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-30T12:30:07+00:00\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"Responsive with SASS Mixin use breakpoint on if condition\",\"datePublished\":\"2021-05-30T11:48:41+00:00\",\"dateModified\":\"2021-05-30T12:30:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/\"},\"wordCount\":32,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"articleSection\":[\"SASS\",\"SCSS\"],\"inLanguage\":\"en\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/\",\"name\":\"Responsive with SASS Mixin use breakpoint on if condition - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"datePublished\":\"2021-05-30T11:48:41+00:00\",\"dateModified\":\"2021-05-30T12:30:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive with SASS Mixin use breakpoint on if condition\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive with SASS Mixin use breakpoint on if condition - MyFreeOnlineTools","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/","og_locale":"en_US","og_type":"article","og_title":"Responsive with SASS Mixin use breakpoint on if condition - MyFreeOnlineTools","og_description":"Responsive with SASS Mixin use breakpoint on if the condition SCSS Code _mixins.scss code @mixin response($breakpoint) { @if($breakpoint == xl){ @media(max-width: 1200px){ @content; } } @if($breakpoint == lg){ @media(max-width: 1000px){ [&hellip;]","og_url":"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2021-05-30T11:48:41+00:00","article_modified_time":"2021-05-30T12:30:07+00:00","author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"Responsive with SASS Mixin use breakpoint on if condition","datePublished":"2021-05-30T11:48:41+00:00","dateModified":"2021-05-30T12:30:07+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/"},"wordCount":32,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"articleSection":["SASS","SCSS"],"inLanguage":"en"},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/","url":"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/","name":"Responsive with SASS Mixin use breakpoint on if condition - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"datePublished":"2021-05-30T11:48:41+00:00","dateModified":"2021-05-30T12:30:07+00:00","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/responsive-with-sass-mixin-use-breakpoint-on-if-condition\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Responsive with SASS Mixin use breakpoint on if condition"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=1347"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1347\/revisions"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=1347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=1347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=1347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}