Never again use media queries!

Install

npm install sass-mediaquery-singleline --save

How to import

On your scss (with webpack), add:

@import '~sass-mediaquery-singleline/main';

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).

So, you need to change the below sass variables to your respective layout viewport widths:

// default values
$deskSize: 1920;
$mobileSize: 375;

Custom variables

// custom available variables
$deskSize: 1920 !default;
$mobileSize: 375 !default;
$mobileIdentifier: 768 !default;
$considerMinimalFont: true !default;
  $minFont: 10 !default;
  $minFontResolution: 1280 !default;

• deskSize (Number) Desktop width defined by the designer layout
• mobileSize (Number) Mobile width defined by the designer layout
• mobileIdentifier (Number) Defines @media mobile identifier (max-width) to start calc with third attr() function param
• considerMinimalFont (Boolean) Defines if you want se a minimal font on tiny resolutions(minFontResolution)
• minFont (Number) The minimal font according to defined resolution(minFontResolution)
• minFontResolution (Number) Defines the resolution that minFont will be applied

Usage:

.an-element {
  @include attr(height, 200, 140);  // height 200(calculated) on desk and height 140(calculated) on mobile
  @include attr(display, flex, block);  // display: flex on desk and display: block on mobile
  @include attr(flex-direction, false, column);  // media mobile with flex-direction: column, but on desk wasn't created
  @include mediaAttr(height, 100, 320);  // media max-width: 320px with height: 100[calculated]
  @include attr(width, 20px, 15px);  // values with units will be put exactly what you type
}

• attr($attr, $desk, $mobile) Set an attribute responsible equals to desktop and mobile according to designer's resolutions

  • attr (CSS Attribute) [Required] The attribute name that you want responsible and/or calculated
  • 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
  • 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

• mediaAttr($attr, $value, $resolution) Set an attribute responsible according to defined resolution parameter

  • attr (CSS Attribute) [Required] The attribute name that you need responsible and/or calculated
  • value (CSS Value|Number) [Required] The resolution value that will be applied to resolution or a value with unit to set an exact value
  • resolution (Number|CSS Media Condition) [Required] The resolution that the value will be applied

Dev

If you want to dev or test this mixin, run the command below npm run dev

Tip: Use a css minifier

Licence

sass-mediaquery-singleline is open-sourced software licensed under the MIT license.