A Sass mixin library that allows for defining media queries for various devices with logical operators.
The library provides a mixin called device that takes in logical operators and values corresponding to screen widths. You can create complex media queries using operators like >, >=, <, and <= combined with predefined device variables or custom values.
The library includes predefined variables for common device sizes:
$phone: 480px;
$phone-landscape: 812px;
$tablet: 1024px;
$tablet-landscape: 1366px;
$desktop: 1920px;
$laptop: 1920px;
$screen-4k: 3840px;
You can override these variables by defining them in your Sass file before importing the library:
$phone: 500px; // Your custom value
@import 'device_media_query/src/index';
You can use the following logical operators with the device mixin:
-
>
: greater than -
>=
: greater than or equal to -
<
: less than -
<=
: less than or equal to
- Clone the repository:
git clone https://github.com/yourusername/device_media_query.git
- Import the library in your Sass file:
@import 'path/to/device_media_query/src/index';
- Install the package:
npm install device-media-query
- Import the library in your Sass file using either @import:
@import 'device-media-query/src/index';
Here's an example of how you can use the device mixin:
@include device('>', $tablet, '<=', $desktop) {
.my-class {
font-size: 18px;
}
}
This will generate a media query that applies the specified styles to screens greater than $phone and less than or equal to $tablet. The rendered CSS will look like:
@media (min-width: 1025px) and (max-width: 1920px) {
.my-class {
font-size: 18px;
}
}
This project is licensed under the GNU General Public License v3.0. See the LICENSE file for details.