sass-mediaquery-singleline
SASS Media queries on a single line.Never again use media queries!
Install
npm install sass-mediaquery-singleline --save
How to import
On your scss (with webpack), add:
;
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).
The calc is based on So, you need to change the below sass variables to your respective layout viewport widths:
// default values ;;
Custom variables
// custom available variables ;;;;;;
deskSize
(Number) Desktop width defined by the designer layoutmobileSize
(Number) Mobile width defined by the designer layoutmobileIdentifier
(Number) Defines @media mobile identifier (max-width) to start calc with third attr() function paramconsiderMinimalFont
(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 thatminFont
will be applied
Usage:
.an-element
-
attr($attr, $desk, $mobile)
Set an attribute responsible equals to desktop and mobile according to designer's resolutionsattr
(CSS Attribute) [Required] The attribute name that you want responsible and/or calculateddesk
(CSS Value|Number) [Not Required, can befalse
] The desktop resolution value according to designer's layout or a value with unit to set an exact valuemobile
(CSS Value|Number) [Not Required, can befalse
] 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 parameterattr
(CSS Attribute) [Required] The attribute name that you need responsible and/or calculatedvalue
(CSS Value|Number) [Required] The resolution value that will be applied toresolution
or a value with unit to set an exact valueresolution
(Number|CSS Media Condition) [Required] The resolution that the value will be applied
See the Pen SASS MediaQuery SingleLine Sample by Grégori Sória (@gregorisoria) on CodePen.
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.