Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kopepasah/sass-media-query-stack
Sass mixin which builds media queries, from simple to complex.
https://github.com/kopepasah/sass-media-query-stack
media-queries media-query sass sass-mixins
Last synced: 3 days ago
JSON representation
Sass mixin which builds media queries, from simple to complex.
- Host: GitHub
- URL: https://github.com/kopepasah/sass-media-query-stack
- Owner: kopepasah
- License: mit
- Archived: true
- Created: 2017-07-10T02:04:35.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-09-03T16:13:24.000Z (over 7 years ago)
- Last Synced: 2024-04-24T18:41:50.174Z (9 months ago)
- Topics: media-queries, media-query, sass, sass-mixins
- Language: CSS
- Homepage:
- Size: 19.5 KB
- Stars: 0
- Watchers: 18
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Media Query Stack
One of the most common issues we have found using other media query mixins is their inability to build complex queries; thus, requiring us to fallback to using the standard [`@media`][1] CSS [at-rule][2]. While this is not necessarily a problem, it defeats the purpose of using a mixin and polutes the code with generic, untestable media queries.
Media Query Stack solves this problem by allowing developers to create simple media queries using defined breakpoints, while also allowing them to build complex media query stacks using all available types and features.
## Installation
```bash
yarn add sass-mqs --dev
# OR
npm install sass-mqs --save-dev
```## Usage
There are three options for using this mixin: `string`, `list` or `map`.
```scss
// A predefined breakpoint as a string.
@include mqs( large ) {
...
}// A list which defines specific features.
@include mqs((
min-width small,
max-width huge
)) {
...
}// A map which provides type and features.
@include mqs((
'only screen' : (
min-width 300,
max-width 550,
orientation portrait
),
'all': (
max-width 550,
)
)) {
...
}
```[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media
[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule