Skip to content
SASS Media queries on a single line
CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
CHANGELOG.md
LICENSE
README.md
_config.yml
main.scss
package.json
sache.json

README.md

sass-mediaquery-singleline

SASS Media queries on a single line.

Never again use media queries!

Install

npm install sass-mediaquery-singleline

How to import

On your scss (with webpack), add:

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

Config

The calc is based on vw metric considering the desktop width and mobile width providing by designer's layout.

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

// default values
$deskSize: 1920;
$mobileSize: 768;

EXAMPLES:

.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: 100px(calculated)
  @include attr(width, 20px, 15px, true);  // 'true' to no calculated value
}

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

CodePen

Tip: Use a css minifier
You can’t perform that action at this time.