qSass

Very Simple and Advanced Media Queries to SASS

qPlus

qPlus is very smart and simple mixin. Just write what you want. It will apply it if you wrote true query and accepts three way.

Way 1 : Shortand Queries

@include qPlus(xs) {
    // your codes
}

//  output
@media only screen and (min-width : 320px) {
    // your codes
}

Other Valid Values

• xs, sm, md, lg, xl
• xs-max, sm-max, md-max, lg-max
• xs-only, sm-only, md-only, lg-only
• portrait, landscape
• retina

It accepts more values than one

@include qPlus(xs, portrait) {
    // your codes
}

// output
@media only screen and (min-width : 320px) and (orientation : portrait) {
    // your codes
}
@include qPlus(retina) {
    // your codes
}
// output
@media only screen and (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  //  your codes
}

Way 2 : CSS Queries

qSass likes support from CSS

Example usage

 @include qPlus((min-width : 320px)) {
    //  your codes
 }

 @include qPlus((min-width : 320px), (orientation : portrait)) {
    //  your codes
 }

Way 3 : Numeric Values

You can use it with numeric values

Example usage

 @include qPlus(320px) {
    //  your codes
 }

 // output
 @media only screen and (min-width : 320px) {
    // your codes
 }
 @include qPlus(320px, 480px) {
    // your codes
 }
 // output
 @media only screen and (min-width : 320px) and (max-width : 480px) {
    // your codes
 }

Did you forget write value unit? Don't worry. qPlus will handle it.

@include qPlus(320, 480) {
    //  your codes
}

 // output
@media oly screen and (min-width : 320px) and (max-width : 480px) {
   //  your codes
}

Do you work with 'em' unit or others. Don'be hesitate. You can keep work still with qSass.

@include qPlus(20em) {
    // your codes
}

//  output
@media only screen and (min-width : 20em) {
    //  your codes
}

qDevice

I developed qDevice for some famous screen what you use often.

There is a long list. Choose one and use.

iphone3, iphone4, iphone5, iphone6, iphone6Plus, iphone7, iphone7Plus iphone8, iphone8Plus, iphoneX, g3, g4, g5, optimusG, galaxyS, galaxyS2, galaxyS3, galaxyS3Mini, galaxyS4, galaxyS5, galaxyS6, galaxyS7, galaxyS8, galaxyNexus, galaxyNote, galaxyNote2, galaxyNote3, galaxyNote4, galaxyNote8, nexus4, nexus5, nexus6, xperiaZ, xperiaZ3, xperiaS, xperiaP, ipad, ipadAir, ipadMini, ipadPro, galaxyTab3, galaxyTab2, galaxyTab2-Small, nexus10, nexus9, nexus7-V2, nexus7-V1, playbook, surface, surfacePro, surfacePro2, surfacePro3, kindleFire, kindleFireHD7

@include qDevice(iphoneX) {
    //  your codes
}

//  output
@media only screen and (min-width : 375px) and (max-width : 812px) {
    //  your codes
}

Customize

There is some default values in qSass. You can customize that to yourself.

Just find this object in _config.scss and customize the breakpoints. That's all.

$Breakpoints : (
    xs : 320px,
    sm : 480px,
    md : 768px,
    lg : 992px,
    xl : 1200px
);

Maybe you dont want write your code just for 'only screen'.

// You can change follow lines with what you want
$default-device : 'only screen' !default;

//  It is for all device types
$default-device : 'all';

Also you can make your own query

//  Find the object on _config.scss where in follow lines

$Queries : (
    //  default queries,
    //  ..............,
    //  ..............,
    //  follow line is my custom query,
    my-query : '(min-width : 1280px) and (max-width : 1920px)'
);
//  now try it in anywhere
@include qPlus( my-query ) {
    //  your codes
}

Note : Write your query between quotes. It should be string.

Also you can add your own devie values with same way.

Just find $Devices object in _config.scss and add a device name and values.

$Devices : (
    //  default devices,
    //  ...............,
    //  ...............,
    //  adding new device,
    iphone10 : (value1, value2)
);

Practical Mixins

qSass contains some simple mixins also

@include xs() {
    //  your codes
    //  apply that codes i qPlus( xs ) {}
    //
    //  Other mixins
    //  ----------------
    //  @include sm() {}
    //  @include md() {}
    //  @include lg() {}
    //  @include xl() {}
    //  @include xs-max() {}
    //  @include sm-max() {}
    //  @include md-max() {}
    //  @include lg-max() {}
    //  @include xl-max() {}
    //  @include xs-only() {}
    //  @include sm-only() {}
    //  @include md-only() {}
    //  @include lg-only() {}
    //  @include portrait() {}
    //  @include landscape() {}
    //  @include retina() {}
}
@include retina() {
    //  your codes
    //  apply that codes with qPlus(retina)
    //  So that codes will work on retina screens
}