Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dreipol/scss-mq
dreipol scss media queries helper
https://github.com/dreipol/scss-mq
Last synced: 7 days ago
JSON representation
dreipol scss media queries helper
- Host: GitHub
- URL: https://github.com/dreipol/scss-mq
- Owner: dreipol
- License: mit
- Created: 2017-08-09T15:12:06.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T01:36:09.000Z (almost 2 years ago)
- Last Synced: 2024-04-26T18:04:38.595Z (7 months ago)
- Language: SCSS
- Homepage: https://www.dreipol.dev/scss-mq/
- Size: 1.21 MB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# scss-mq
Dreipol scss media queries helper
[![Build Status][travis-image]][travis-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]
# Documentation
- [API](https://www.dreipol.dev/scss-mq/)
- [Demo](https://www.dreipol.dev/scss-mq/demo)
# Usage
## Installation
```bash
npm i @dreipol/scss-mq -S
```
## Import
You can import the `mq` mixin in your sass files simply using the `@use` rule for example:
```scss
@use 'node_modules/@dreipol/scss-mq' as *;
a {
@include mq('xs') {
color: red;
}
}
```
Notice that you can override the internal module variables using the `with` rule for example:
```scss
@use 'node_modules/@dreipol/scss-mq' as * with (
$breakpoints: (xs: 600px, sm: 767px, md: 991px, lg: 1279px, xl: 1599px)
);
a {
@include mq('xs') {
color: red;
}
}
```
**IMPORTANT** You should override the internal `scss-mq` variables **only once** and at beginning of your `main.scss` file.`For example
In `main.scss`
```scss
@use 'node_modules/@dreipol/scss-mq' as * with (
$breakpoints: (xs: 600px, sm: 767px, md: 991px, lg: 1279px, xl: 1599px)
);
// Grid
@use 'path/to/grid';
// components
@use 'path/to/a/component-b';
@use 'path/to/a/component-b';
```
In `grid.scss`
```scss
// you don't need to override again the breakpoints here!
@use 'node_modules/@dreipol/scss-mq' as *;
.grid {
@include mq('xs') {
width: 100%;
}
}
```
[travis-image]:https://img.shields.io/travis/dreipol/scss-mq.svg?style=flat-square
[travis-url]:https://travis-ci.org/dreipol/scss-mq
[license-image]:http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]:LICENSE
[npm-version-image]:http://img.shields.io/npm/v/@dreipol/scss-mq.svg?style=flat-square
[npm-downloads-image]:http://img.shields.io/npm/dm/@dreipol/scss-mq.svg?style=flat-square
[npm-url]:https://npmjs.org/package/@dreipol/scss-mq