Sass-mediaquery-singleline NPM

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