https://github.com/ashetm/sass-mixins-responsive
Sass mixins utilities for media/responsive.
https://github.com/ashetm/sass-mixins-responsive
css media responsive sass scss
Last synced: 3 months ago
JSON representation
Sass mixins utilities for media/responsive.
- Host: GitHub
- URL: https://github.com/ashetm/sass-mixins-responsive
- Owner: AsheTM
- Created: 2023-01-31T12:00:16.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-05T18:00:28.000Z (over 3 years ago)
- Last Synced: 2025-07-17T13:35:06.143Z (about 1 year ago)
- Topics: css, media, responsive, sass, scss
- Language: SCSS
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# @ashetm/sass-mixins-responsive
Some responsive utilities Sass mixins for your needs. Take what you need!
## Install
You can install it with npm:
```bash
npm install @ashetm/sass-mixins-responsive
```
## Import
You only need to import ``@ashetm/sass-mixins-responsive``.
```scss
@import '@ashetm/sass-mixins-responsive';
```
or, if you want to override the breakpoint value(s)
```scss
@use '@ashetm/sass-mixins-responsive' as *;
$breakpoint-mobile: 500px;
$breakpoint-tablet: 800px;
$breakpoint-laptop: 1000px;
```
## Usage
### Variables
There is 3 variables that can be overriden:
* ``$breakpoint-mobile`` with default value ``612px``
* ``$breakpoint-tablet`` with default value ``912px``
* ``$breakpoint-laptop`` with no default value
### Mixins
#### for-mobile
Example:
```scss
.selector {
@include for-mobile {
width: 100%;
}
}
```
gives in output:
```css
@media all and (min-width: <$breakpoint-mobile: 612px>) {
.selector {
width: 100%;
}
}
```
#### for-tablet
Example:
```scss
.selector {
@include for-tablet {
width: 100%;
}
}
```
gives in output:
```css
@media all and (min-width: <$breakpoint-mobile + 1: 613px>) and (max-width: <$breakpoint-tablet: 912px>) {
.selector {
width: 100%;
}
}
```
#### for-laptop
Example:
```scss
.selector {
@include for-laptop {
width: 100%;
}
}
```
gives in output:
```css
/* If ``$breakpoint-laptop`` is given */
@media all and (min-width: <$breakpoint-tablet + 1: 913px>) and (max-width: <$breakpoint-laptop: 912px>) {
.selector {
width: 100%;
}
}
/* If ``$breakpoint-laptop`` is not given */
@media all and (min-width: <$breakpoint-tablet + 1: 913px>) {
.selector {
width: 100%;
}
}
```
#### for-huge-screen
**NB:** If ``$breakpoint-laptop`` is given, this mixin will be available otherwise it will throw an error.
Example:
```scss
.selector {
@include for-huge-screen {
width: 100%;
}
}
```
gives in output:
```css
/* If ``$breakpoint-laptop`` is given */
@media all and (min-width: <$breakpoint-laptop + 1>) {
.selector {
width: 100%;
}
}
```
#### at-least
Example:
```scss
.selector {
@include at-least(<$value>, <$device: screen>) {
width: 100%;
}
}
```
gives in output:
```css
@media <$device: screen> and (min-width: <$value>) {
.selector {
width: 100%;
}
}
```
#### between
Example:
```scss
.selector {
@include between(<$min>, <$max>, <$device: screen>) {
width: 100%;
}
}
```
gives in output:
```css
@media <$device: screen> and (min-width: <$min>) and (max-width: <$max>) {
.selector {
width: 100%;
}
}
```
#### at-most
Example:
```scss
.selector {
@include at-most(<$value>, <$device: screen>) {
width: 100%;
}
}
```
gives in output:
```css
@media <$device: screen> and (max-width: <$value>) {
.selector {
width: 100%;
}
}
```