{"id":17046498,"url":"https://github.com/peduarte/mobile-first-sass","last_synced_at":"2025-08-02T17:11:19.846Z","repository":{"id":8129729,"uuid":"9547029","full_name":"peduarte/mobile-first-sass","owner":"peduarte","description":"Mobile First Approach with SASS","archived":false,"fork":false,"pushed_at":"2013-04-23T13:07:54.000Z","size":156,"stargazers_count":19,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T15:56:56.292Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peduarte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-04-19T14:19:23.000Z","updated_at":"2021-01-01T15:42:46.000Z","dependencies_parsed_at":"2022-08-18T02:00:43.631Z","dependency_job_id":null,"html_url":"https://github.com/peduarte/mobile-first-sass","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/peduarte/mobile-first-sass","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Fmobile-first-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Fmobile-first-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Fmobile-first-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Fmobile-first-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peduarte","download_url":"https://codeload.github.com/peduarte/mobile-first-sass/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Fmobile-first-sass/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268424028,"owners_count":24248119,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T09:46:28.697Z","updated_at":"2025-08-02T17:11:19.806Z","avatar_url":"https://github.com/peduarte.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"#Mobile First Approach with SASS\n\nAnyone who has used the Mobile First approach to build a website has discovered, sooner or later, that IE prior to 9 serve the mobile version.\nThis is because IE \u003c 9 ignores everything inside the @media-query blocks.\n\nThere are already a number of solutions for this problem, such as:\n\n[Jake Archibald](http://jakearchibald.github.io/sass-ie/) \u003cbr\u003e\n[Jeremy Keith](http://adactio.com/journal/4494/) \u003cbr\u003e\n[Respond.js](https://github.com/scottjehl/Respond)\n\nI came up with my own solution which is based on what Jake suggests.\n\nThe problem I found with Jake's solution is that you need to have a mixin for min-width and a mixin for max-width.\nI wanted one mixin where I could define my media query however I wanted.\n\nSo here's my solution:\n\n##File Structure:\n\tindex.html\n\n\tall.scss\n\tcss/oldie.scss\n\tcss/_utils.scss\n\tcss/_global.scss\n\n## index.html:\n\n\t\u003c!--[if lte IE 8]\u003e\n\t    \u003clink rel=\"stylesheet\" href=\"path/oldie.css\"\u003e\n\t\u003c![endif]--\u003e\n\t\u003c!--[if gt IE 8]\u003e\u003c!--\u003e\n\t    \u003clink rel=\"stylesheet\" href=\"path/all.css\"\u003e\n\t\u003c!--\u003c![endif]--\u003e\n\n\n## all.scss\n\n\t@import '_utils';\n\t@import '_global';\n\n\n## oldie.scss\n\n\t$old-ie: true;\n\t$mq-ie: desk;\n\n\t@import 'all';\n\n\n## _utils.scss\n\n\t// Here we define that by default our users are not using an old browser\n\t// The use of !default allow us to override this variable before this point\n\t$old-ie: false !default;\n\n\t// Here we define some breakpoints - This can be whatever you want/need\n    $desk-start: 1000px !default;\n\n\n    // This is where the magic happens\n    // Our media-query mixin takes one argument, which is the media-query type\n    @mixin media-query($media-query) {\n\n    \t// If $old-ie is false, carry on...\n        @if $old-ie == false {\n\n        \t// Here we check for the argument we passed when we included the media query\n        \t// If our argument is 'mobile', then go ahead and create our media query\n        \t// The media query can be anything you want.\n            @if $media-query == mobile {\n                @media only screen and (max-width: $desk-start) {\n                \t@content;\n                }\n            }\n\n            // If our argument is 'desk', then go ahead and create our media query for desktop\n            @if $media-query == desk {\n                @media only screen and (min-width: $desk-start) {\n                \t@content;\n                }\n\n            }\n            \n            // If our argument is 'print', we can also set a print media query. win!\n            @if $media-query == print {\n            \t@media print {\n            \t\t@content;\n            \t}\n            }\n        }\n\n        // Now, if $mq-ie ($mq-ie is defined in oldie.scss) is the same as what we passed\n        // Then go ahead and use that block of code.\n        // On all.scss we defined $mq-ie as equals to 'desk', so basically what this is doing is\n        // Checking for every include of the media-query mixin that uses 'desk' as the argument\n        // And using this code as default\n        @else if $mq-ie == $media-query {\n        \t@content;\n        }\n    }\n\n## _global.scss (example)\n\t* { margin: 0; padding: 0; }\n\n\tbody {\n\t\tbackground: #737E8C;\n\t\tcolor: #ffffff;\n\t\tfont-size: 20px;\n\t\tline-height: 26px;\n\t\tpadding: 60px 0 0;\n\t\n\t\t// This is an example of how to use the media-query mixin\n\t\t// Styles in this declaration will only show on desktop\n\t\t@include media-query(desk) {\n\t\t\tbackground: #8C7D73;\n\t\t}\n\t\n\t}\n\t\n\ta {\n\t\tcolor: #333333;\n\t\tfont-weight: bold;\n\t}\n\t\n\tp {\n\t\tdisplay: block;\n\t\tclear: both;\n\t\tpadding: 60px 15%;\n\t\ttext-align: center;\n\t}\n\t\n\t.code-sample {\n\t\tmargin: 3%;\n\t\n\t\t@include media-query(desk) {\n\t\t\tfloat: left;\n\t\t\twidth: 47%;\n\t\t\tmargin: 0 1.5%;\n\t\t}\n\t}\n\t\n\tpre {\n\t\tbackground: #999999;\n\t\tfont-size: 16px;\n\t\tpadding: 0 0 0 20px;\n\t}\n\n####I also created a [Demo page](http://www.pedroduarte.me/mobile-first-sass/) so you can see it in action.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeduarte%2Fmobile-first-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeduarte%2Fmobile-first-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeduarte%2Fmobile-first-sass/lists"}