Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unsass/breakpoint
Sass functions and mixins to use media queries rules.
https://github.com/unsass/breakpoint
breakpoint media-queries sass
Last synced: 9 days ago
JSON representation
Sass functions and mixins to use media queries rules.
- Host: GitHub
- URL: https://github.com/unsass/breakpoint
- Owner: unsass
- License: mit
- Created: 2022-02-28T20:32:27.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-24T18:22:11.000Z (9 months ago)
- Last Synced: 2024-04-24T20:13:38.176Z (9 months ago)
- Topics: breakpoint, media-queries, sass
- Language: SCSS
- Homepage: https://mellow-souffle-b0b37e.netlify.app/breakpoint/
- Size: 1.21 MB
- Stars: 12
- Watchers: 1
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Breakpoint
[](https://www.npmjs.com/package/@unsass/breakpoint)
[](https://www.npmjs.com/package/@unsass/breakpoint)
[](https://www.npmjs.com/package/@unsass/breakpoint)
## Introduction
Sass functions and mixins to use media queries rules.
## Installing
```shell
npm install @unsass/breakpoint
```
## Usage
```scss
@use "@unsass/breakpoint";
.foo {
@include breakpoint.up("lg") {
// ...
}
}
```
### Configuration
```scss
@use "@unsass/breakpoint" with (
$screens: (
"lg": 1024px
)
);
```
### Options
| Variable | Default | Description |
|------------|-----------------------|---------------------------------------------------------------------------------------------------|
| `$screens` | See `Tokens` section. | Sets a list of breakpoint tokens. |
| `$reset` | `false` | Erase the default `$screens` config for helping you on a fresh start with your own custom tokens. |
### Tokens
| Key | Value |
|-------|----------|
| `xs` | `360px` |
| `sm` | `480px` |
| `md` | `768px` |
| `lg` | `960px` |
| `xl` | `1200px` |
| `2xl` | `1400px` |
You can also define new size:
```scss
@use "@unsass/breakpoint" with (
$screens: (
"3xl": 1920px
)
);
```
The new token named `3xl` will be added to the default tokens list.
### Top-level config override
If variables are already configured on top-level using `@use ... with`, by another dependency for example, you can't use
this solution anymore, because the module can only be setup once, this is a Sass restriction with **Module System**, but
another solution exist for override the main configuration, with a mixin!
See [official documentation](https://sass-lang.com/documentation/at-rules/use#with-mixins) about override configuration
with mixins.
| Mixin | Description |
|----------------------------|:-----------------------------------------|
| `config($screens, $reset)` | Override top-level `with` configuration. |
#### Declare config with `breakpoint.config()`
```scss
@use "@unsass/breakpoint";
// Extend the default list...
@include breakpoint.config((
"3xl": 1980px
));
// ... or reset for fresh start...
@include breakpoint.config((
"tablet": 768px,
"desktop": 960px
), true);
```
## API
### Sass mixins
| Mixin | Description |
|-----------------------|--------------------------------------------------------------------------------------------------------------------------------|
| `up($token)` | Sets media rule for minimum width only. |
| `down($token)` | Sets media rule for maximum width only. |
| `only($token)` | Sets media rule for between minimum and maximum widths, but the maximum will be automatically set with next value of `$token`. |
| `between($min, $max)` | Sets media rule for between minimum and maximum widths. |
#### Up rule with `breakpoint.up()`
The following Sass...
```scss
@use "@unsass/breakpoint";
.foo {
@include breakpoint.up("lg") {
color: darkcyan;
}
}
```
...will produce the following CSS...
```css
@media (min-width: 960px) {
.foo {
color: darkcyan;
}
}
```
#### Down rule with `breakpoint.down()`
The following Sass...
```scss
@use "@unsass/breakpoint";
.foo {
@include breakpoint.down("lg") {
color: darkcyan;
}
}
```
...will produce the following CSS...
```css
@media (max-width: 959px) {
.foo {
color: darkcyan;
}
}
```
#### Only rule with `breakpoint.only()`
The following Sass...
```scss
@use "@unsass/breakpoint";
.foo {
@include breakpoint.only("lg") {
color: darkcyan;
}
}
```
...will produce the following CSS...
```css
@media (min-width: 960px) and (max-width: 1199px) {
.foo {
color: darkcyan;
}
}
```
#### Between rule with `breakpoint.between()`
The following Sass...
```scss
@use "@unsass/breakpoint";
.foo {
@include breakpoint.between("md", "xl") {
color: darkcyan;
}
}
```
...will produce the following CSS...
```css
@media (min-width: 768px) and (max-width: 1199px) {
.foo {
color: darkcyan;
}
}
```
### Sass functions
| Function | Description |
|---------------------|--------------------------------------------|
| `get-value($token)` | Get value from the configured tokens list. |
| `get-screens()` | Get list of screens tokens. |
#### Get token value with `breakpoint.get-value()`
The following Sass...
```scss
@use "@unsass/breakpoint";
.foo {
width: breakpoint.get-value("lg");
}
```
...will produce the following CSS...
```css
.foo {
width: 960px;
}
```