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 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; // px; // px
// custom available variables; // px; // px;; // px; // px
deskSize(Number) Desktop width defined by the designer layout
mobileSize(Number) Mobile width defined by the designer layout
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(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(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(Number) [Required] The resolution value that will be applied to
resolutionor a value with unit to set an exact value
resolution(Number[px]|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.