sass-mediaquery-singlelineSASS Media queries on a single line.
Never again use media queries!
npm install sass-mediaquery-singleline --save
How to import
On your scss (with webpack), add:
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;;
// custom available variables;;;;;;
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(
minFont(Number) The minimal font according to defined resolution(
minFontResolution(Number) Defines the resolution that
minFontwill be applied
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
resolutionor a value with unit to set an exact value
resolution(Number|CSS Media Condition) [Required] The resolution that the value will be applied
If you want to dev or test this mixin, run the command below
npm run dev
Tip: Use a css minifier
sass-mediaquery-singleline is open-sourced software licensed under the MIT license.