resass
v1.2.3
Published
Mixins for checking group of devices (mobile, tablet, laptop, desktop) or device by name (iPhone 5, iPhone X, iPhone 11 Pro Max, iPad Pro 12.9, etc). Expandable and very simple for usage.
Downloads
18
Maintainers
Readme
resass
##sass media queries mixin
Getting started
Install
Install with npm:
$ npm install resass
Install with github:
$ git clone https://github.com/MatviyRoman/resass.git
Install with curl:
$ curl -O https://raw.githubusercontent.com/MatviyRoman/resass/master/mq.scss
Download
Usage
- Include resass to app:
@import "resass/r";
or
@import "resass/mq";
Documentation
Mixins for checking device by width and height (width, min-width, max-width, height, min-height, max-height) or group of devices (mobile, tablet, laptop, desktop) or device by name (iPhone 5, iPhone X, iPhone 11 Pro Max, iPad Pro 12.9, etc). Expandable and very simple for usage.
Include
Full include
Before
1) @include screen()
2) @include min-screen()
3) @include max-screen()
4) @include height()
5) @include min-screen-height()
6) @include max-screen-height()
7) @include landscape()
8) @include portrait()
After
1) @media only screen and (min-width: width) and (max-width: width)
2) @media only screen and (min-width: width)
3) @media only screen and (max-width: width)
4) @media only screen and (min-height: height) and (max-height: height)
5) @media only screen and (min-height: height)
6) @media only screen and (max-height: height)
7) @media only screen and (orientation: landscape)
8) @media only screen and (orientation: portrait)
Short include
Before
1) @include s()
2) @include smin()
3) @include smax()
4) @include h()
5) @include hmin()
6) @include hmax()
7) @include l()
8) @include p()
After
1) @media only screen and (min-width: width) and (max-width: width)
2) @media only screen and (min-width: width)
3) @media only screen and (max-width: width)
4) @media only screen and (min-height: height) and (max-height: height)
5) @media only screen and (min-height: height)
6) @media only screen and (max-height: height)
7) @media only screen and (orientation: landscape)
8) @media only screen and (orientation: portrait)
Examples:
It can be used like this:
scss
@include screen(min-width, max-width, orientation) {
/*...*/
}
@include s(min-width, max-width, orientation) {
/*...*/
}
Before:
@include screen(320px, 768px, portrait) {
/*...*/
}
@include s(0, 768px, l) {
/*...*/
}
After:
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) {
/*...*/
}
@media only screen and (max-width: 768px) and (orientation: landscape) {
/*...*/
}
Or like this:
@include device(iPhone5, portrait) {
// portrait orientation
// iPhone 5, iPhone 5s, iPhone 5c, iPhone SE
}
@include device(iPhone6Plus iPhoneXR, landscape) {
// landscape orientation
// iPhone 6+, iPhone 6s+, iPhone 7+, iPhone 8+, iPhone XR, iPhone 11
}
@include device(iPadPro10 iPadPro11 iPadPro12) {
// all orientations
// iPad Pro 10.5, iPad Pro 11, iPad Pro 12.9
}
Or like this:
@include device(desktop) {
// all orientations
// desktop
}
@include device(mobile tablet laptop, landscape) {
// landscape orientation
// mobile, tablet, laptop
}
Or even like this:
@include device(mobile-landscape tablet laptop) {
// landscape orientation
// mobile
// all orientations
// tablet, laptop
}
@include device(mobile-landscape tablet laptop, portrait) {
// landscape orientation
// mobile
// portrait orientation
// tablet, laptop
}
Before
@include s(325px, 0) {
/*...*/
}
After
@media only screen and (min-width: 325px) {
/*...*/
}
Before
Before @include s(0, 325px) {
/*...*/
}
After
@media only screen and (max-width: 325px) {
/*...*/
}
There are also common mixins:
@include screen(min-width, max-width, orientation) {
/*...*/
}
@include screen(min-width, max-width, orientation) {
/*...*/
}
@include min-screen(width, orientation) {
/*...*/
}
@include max-screen(width, orientation) {
/*...*/
}
@include screen-height(min-height, max-height, orientation) {
/*...*/
}
@include min-screen-height(height, orientation) {
/*...*/
}
@include max-screen-height(height, orientation) {
/*...*/
}
Orientations:
@include landscape() {
/*...*/
}
@include portrait() {
/*...*/
}
List of supported devices:
Groups
- Mobiles 320-767px
mobile
mobile-portrait
mobile-landscape
- Tablets 768-1023px
tablet
tablet-portrait
tablet-landscape
- Laptops 1024-1199px
laptop
laptop-portrait
laptop-landscape
- Desktop >=1200px
desktop
desktop-portrait
desktop-landscape
Phones
- iPhone 5, 5s, 5c, SE
iphone5
iphone5s
iphone5c
iphonese
- iPhone 6, 6s, 7, 8
iphone6
iphone6s
iphone7
iphone8
- iPhone 6+, 6s+, 7+, 8+
iphone6plus
iphone6splus
iphone7plus
iphone8plus
- iPhone X, XS, 11 Pro
iphonex
iphonexs
iphone11pro
- iPhone XR, 11
iphonexr
iphone11
- iPhone XS Max, 11 Pro Max
iphonexsmax
iphone11promax
Tablets
- iPad 1, 2, Mini, Air
ipad1
ipad2
ipadmini
ipadair
- iPad 3, 4, Pro 9.7"
ipad3
ipad4
ipadpro9
- iPad Pro 10.5"
ipadpro10
- iPad Pro 11.0"
ipadpro11
Laptops
- iPad Pro 12.9"
ipadpro12
Well, Yes. iPad Pro 12.9" is a laptop because of its size.
Expanding the list of devices:
You can add support for custom devices or group of devices without editing the source.
Before @import "resass/mq"
, you must specify $ms-devices
variable with a list of additional devices:
$ms-devices: (
desktop-sm: (
group: true,
// group of devices
min: 1200px,
max: 1919px
),
desktop-md: (
group: true,
// group of devices
min: 1920px,
max: 2879px
),
desktop-lg: (
group: true,
// group of devices
min: 2880px
),
pixel2xl: (
group: false,
// specific device
width: 411px,
// or 412px?..
height: 823px,
pixel-ratio: 3.5
),
macbook12: (
group: false,
// specific device
orientation: landscape,
width: 1440px,
height: 900px,
pixel-ratio: 2
),
imac27: (
group: false,
// specific device
orientation: landscape,
width: 5120px,
height: 2880px
)
);
Demo
Helpful Links
Important
Don't check the adaptability in the browser DevTools, there are incorrectly calculated dimensions of the sides in the landscape orientation of the device. It is better to check on a real device or in a simulator (for example, xCode Simulator).
Use group-css-media-queries to optimize media queries. Without it, a lot of the same
@media ...
code is generated, especially if for the sake of convenience to use the mixin@include device()
in each selector separately. Wrapper for Gulp - gulp-group-css-media-queries.
About
Contributing
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Relese History
| DATE | VERSION | CHANGES | | ---------- | ----------- | -------------------------------------------------- | | 2020-06-20 | v1.0.5 | Fix error | | 2020-06-18 | v1.0.4 | Add short include | | 2020-06-15 | v1.0.3 | Fix error | | 2020-06-10 | v1.0.2 | Fix error | | 2020-06-3 | v1.0.1 | Fix #fix | | 2020-06-1 | v1.0.0 | upload |
Credits
Roman Matviy
License
Copyright © 2020, Roman Matviy.
Released under the MIT License.
Donate
Buy me a coffee :)
QR Code
Or PayPall
Thank You!