sass-mediaquery-singleline

SASS Media queries on a single line.

Never again use media queries!

$3

``bash
npm install sass-mediaquery-singleline --save
`




$3

On your scss (with webpack), add:

`scss
@import '~sass-mediaquery-singleline/main';
`

$3

So, you need to change the below sass variables to your respective layout viewport widths:

`scss
// default values
$deskSize: 1920;
$mobileSize: 375;
`

$3

`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 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

$3

`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 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






See the Pen
SASS MediaQuery SingleLine Sample by Grégori Sória (@gregorisoria)
on CodePen.











$3


If you want to dev or test this mixin, run the command below
npm run dev`

##### Tip: Use a css minifier

$3

sass-mediaquery-singleline is open-sourced software licensed under the MIT license.