Miss any of our Open RFC calls?Watch the recordings here! »

sass-mediaquery-singleline

1.1.0 • Public • Published

SASS MediaQuery SingleLine NPM

SASS MediaQuery SingleLine NPM Downloads SASS MediaQuery SingleLine NPM Version SASS MediaQuery SingleLine NPM Release Date

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:

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

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 
$deskSize: 1920; // px 
$mobileSize: 768; // px 

Custom variables

// custom available variables 
$deskSize: 1920 !default; // px 
$mobileSize: 768 !default; // px 
$considerMinimalFont: true !default;
  $minFont: 10 !default; // px 
  $minFontResolution: 1280 !default; // 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(minFontResolution)
  • minFont (Number) The minimal font according to defined resolution(minFontResolution)
  • minFontResolution (Number) Defines the resolution that minFont will be applied

Usage:

.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, 320px);  // media max-width: 320px with height: 100(px)[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 (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 resolution or a value with unit to set an exact value
    • resolution (Number[px]|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.

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.

Install

npm i sass-mediaquery-singleline

DownloadsWeekly Downloads

7

Version

1.1.0

License

MIT

Unpacked Size

8.8 kB

Total Files

4

Last publish

Collaborators

  • avatar