https://github.com/ushihiraga/scss-media-queries
SCSS Media Queries Mixins
https://github.com/ushihiraga/scss-media-queries
media-queries mixins scss
Last synced: 3 months ago
JSON representation
SCSS Media Queries Mixins
- Host: GitHub
- URL: https://github.com/ushihiraga/scss-media-queries
- Owner: UshiHiraga
- Created: 2023-01-29T00:24:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-29T00:27:23.000Z (over 2 years ago)
- Last Synced: 2025-02-10T05:44:55.303Z (5 months ago)
- Topics: media-queries, mixins, scss
- Language: SCSS
- Homepage:
- Size: 1000 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SCSS Mixins for Media Queries
## Installation
Download and include `media-queries.scss`.
## Usage
SCSS file provides three mixins to control media queries and a map with several breakpoints.
### Avaible mixins
```scss
// Screen width is in the breakpoint's range.
@include media($name);
// Screen width is less than breakpoint's minimum width.
@include media-lt($name);
// Screen width is greater than breakpoint's maximum width.
@include media-gt($name);
```
### Avaible media queries aliases
Edge Devtools consider the following breakpoints:
| Breakpoint name | Minimum width | Maximum width |
| :-------------: | :-----------: | :-----------: |
| mobile-s | 0px | 320px |
| mobile-m | 321px | 375px |
| mobile-l | 376px | 425px |
| tablet | 426px | 768px |
| laptop | 769px | 1024px |
| laptop-l | 1025px | 1440px |
| 4k | 1441px | 2560px |
[Angular Flex Layout MediaQueries](https://github.com/angular/flex-layout/wiki/Responsive-API#mediaqueries-and-aliases) consider the following breakpoints:
| Breakpoint name | Minimum width | Maximum width |
| :-------------: | :-----------: | :-----------: |
| xs | 0px | 599px |
| sm | 600px | 959px |
| md | 960px | 1279px |
| lg | 1280px | 1919px |
| xl | 1920px | 5000px |
## Example
```scss
@use "media-queries.scss" as *;
.container {
@include media("xs") {
background: blue;
}
@include media-lt("mobile-s") {
color: green;
}
@include media-gt("laptop") {
color: red;
}
}
```