SASS Media queries on a single line
npm install sass-mediaquery-singleline
Never again use media queries!
``bash`
npm install sass-mediaquery-singleline --save
On your scss (with webpack), add:
`scss`
@import '~sass-mediaquery-singleline/main';
So, you need to change the below sass variables to your respective layout viewport widths:
`scss`
// default values
$deskSize: 1920;
$mobileSize: 375;
`scss`
// 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 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 that minFont will be applied
`scss`
.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 valuemobile
- (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 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.
##### Tip: Use a css minifier