‚̧Nationwide Polamorous Matrimony
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    sass-mediaquery-singleline

    1.1.5¬†‚Äʬ†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 - whatever your metric unit (px, pt, etc) :D - 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;
    $mobileSize: 375;

    Custom variables

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

    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, 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.

    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

    16

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    9.32 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar