device_media_query

1.0.0 • Public • Published

Device Media Query

A Sass mixin library that allows for defining media queries for various devices with logical operators.

How It Works

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.

Variables Definition and How to Override Them

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';

Logic Operators

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

How to Install from Git

  1. Clone the repository:
git clone https://github.com/yourusername/device_media_query.git
  1. Import the library in your Sass file:
@import 'path/to/device_media_query/src/index';

How to Install with npm

  1. Install the package:
npm install device-media-query
  1. Import the library in your Sass file using either @import:
@import 'device-media-query/src/index';

Example Usage

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;
  }
}

License

This project is licensed under the GNU General Public License v3.0. See the LICENSE file for details.

Package Sidebar

Install

npm i device_media_query

Weekly Downloads

1

Version

1.0.0

License

GPL-3.0-or-later

Unpacked Size

39.2 kB

Total Files

6

Last publish

Collaborators

  • maiobarbero