{"id":15041696,"url":"https://github.com/gregorisoria/sass-mediaquery-singleline","last_synced_at":"2025-04-14T20:32:37.922Z","repository":{"id":36940125,"uuid":"229148864","full_name":"GregoriSoria/sass-mediaquery-singleline","owner":"GregoriSoria","description":"SASS Media queries on a single line","archived":false,"fork":false,"pushed_at":"2022-12-05T06:52:25.000Z","size":351,"stargazers_count":3,"open_issues_count":12,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T22:51:19.632Z","etag":null,"topics":["codepen","css","frontend","media-queries","mediaquery","mixins","sass","scss"],"latest_commit_sha":null,"homepage":"https://gregorisoria.github.io/sass-mediaquery-singleline","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GregoriSoria.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-19T22:30:02.000Z","updated_at":"2021-05-11T02:45:31.000Z","dependencies_parsed_at":"2023-01-17T07:21:54.796Z","dependency_job_id":null,"html_url":"https://github.com/GregoriSoria/sass-mediaquery-singleline","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GregoriSoria%2Fsass-mediaquery-singleline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GregoriSoria%2Fsass-mediaquery-singleline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GregoriSoria%2Fsass-mediaquery-singleline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GregoriSoria%2Fsass-mediaquery-singleline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GregoriSoria","download_url":"https://codeload.github.com/GregoriSoria/sass-mediaquery-singleline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248955955,"owners_count":21189269,"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","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":["codepen","css","frontend","media-queries","mediaquery","mixins","sass","scss"],"created_at":"2024-09-24T20:46:23.020Z","updated_at":"2025-04-14T20:32:37.903Z","avatar_url":"https://github.com/GregoriSoria.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/sass-mediaquery-singleline\"\u003e\n    \u003cimg src=\"http://gssystems.com.br/files/sass-mediaquery-singleline.png\" alt=\"SASS MediaQuery SingleLine NPM\" width=\"420\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dt/sass-mediaquery-singleline\" alt=\"SASS MediaQuery SingleLine NPM Downloads\"\u003e\n  \u003cimg src=\"https://badge.fury.io/js/sass-mediaquery-singleline.svg\" alt=\"SASS MediaQuery SingleLine NPM Version\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/release-date/GregoriSoria/sass-mediaquery-singleline\" alt=\"SASS MediaQuery SingleLine NPM Release Date\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003esass-mediaquery-singleline\u003c/h1\u003e\nSASS Media queries on a single line.\n\n**Never** again use media queries!\n\n\n### Install\n\n```bash\nnpm install sass-mediaquery-singleline --save\n```\n\n\n### How to import\n\nOn your scss (with webpack), add:\n\n```scss\n@import '~sass-mediaquery-singleline/main';\n```\n\n### The calc is based on `vw` metric considering the desktop width and mobile width - whatever your metric unit _(px, pt, etc)_ :D - providing by designer's layout (Figma, Zeplin, PSD, Sketch, etc).\n\nSo, you **need** to change the below sass variables to your respective layout viewport widths:\n\n```scss\n// default values\n$deskSize: 1920;\n$mobileSize: 375;\n```\n\n### Custom variables\n\n```scss\n// custom available variables\n$deskSize: 1920 !default;\n$mobileSize: 375 !default;\n$mobileIdentifier: 768 !default;\n$considerMinimalFont: true !default;\n  $minFont: 10 !default;\n  $minFontResolution: 1280 !default;\n```\n\n- `deskSize` (Number) Desktop **width** defined by the designer layout\n- `mobileSize` (Number) Mobile **width** defined by the designer layout\n- `mobileIdentifier` (Number) Defines @media mobile identifier (max-width) to start calc with third attr() function param\n- `considerMinimalFont` (Boolean) Defines if you want se a minimal font on tiny resolutions(`minFontResolution`)\n- `minFont` (Number) The minimal font according to defined resolution(`minFontResolution`)\n- `minFontResolution` (Number) Defines the resolution that `minFont` will be applied\n\n### Usage:\n\n```scss\n.an-element {\n  @include attr(height, 200, 140);  // height 200(calculated) on desk and height 140(calculated) on mobile\n  @include attr(display, flex, block);  // display: flex on desk and display: block on mobile\n  @include attr(flex-direction, false, column);  // media mobile with flex-direction: column, but on desk wasn't created\n  @include mediaAttr(height, 100, 320);  // media max-width: 320px with height: 100[calculated]\n  @include attr(width, 20px, 15px);  // values with units will be put exactly what you type\n}\n```\n\n- **`attr($attr, $desk, $mobile)`** Set an attribute responsible equals to desktop and mobile according to designer's resolutions\n    - **`attr`** (CSS Attribute) [**Required**] The attribute name that you want responsible and/or calculated\n    - **`desk`** (CSS Value|Number) [Not Required, can be `false`] The desktop resolution value *according to designer's layout* or a value with unit to set an exact value\n    - **`mobile`** (CSS Value|Number) [Not Required, can be `false`] The mobile resolution value *according to designer's layout* or a value with unit to set an exact value\n\n- **`mediaAttr($attr, $value, $resolution)`** Set an attribute responsible according to defined resolution parameter\n    - **`attr`** (CSS Attribute) [**Required**] The attribute name that you need responsible and/or calculated\n    - **`value`** (CSS Value|Number) [**Required**] The resolution value that will be applied to `resolution` or a value with unit to set an exact value\n    - **`resolution`** (Number|CSS Media Condition) [**Required**] The resolution that the value will be applied\n\n\u003cbr\u003e\n\u003cp class=\"codepen\" data-height=\"265\" data-theme-id=\"dark\" data-default-tab=\"css,result\" data-user=\"gregorisoria\" data-slug-hash=\"BayPwmW\" data-pen-title=\"SASS MediaQuery SingleLine Sample\"\u003e\n  \u003cspan\u003eSee the Pen \u003ca href=\"https://codepen.io/gregorisoria/pen/BayPwmW\"\u003e\n  SASS MediaQuery SingleLine Sample\u003c/a\u003e by Grégori Sória (\u003ca href=\"https://codepen.io/gregorisoria\"\u003e@gregorisoria\u003c/a\u003e)\n  on \u003ca href=\"https://codepen.io\"\u003eCodePen\u003c/a\u003e.\u003c/span\u003e\n\u003c/p\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://codepen.io/gregorisoria/pen/BayPwmW\"\u003e\n    \u003cimg src=\"https://s3.amazonaws.com/media.eremedia.com/wp-content/uploads/2018/05/31112343/Codepen.png\" alt=\"CodePen\" width=\"600\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Dev\nIf you want to dev or **test** this mixin, run the command below\n`npm run dev`\n\n##### Tip: Use a css minifier\n\n### Licence\nsass-mediaquery-singleline is open-sourced software licensed under the [MIT license](LICENSE.md).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregorisoria%2Fsass-mediaquery-singleline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgregorisoria%2Fsass-mediaquery-singleline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregorisoria%2Fsass-mediaquery-singleline/lists"}