# modernscssbreakpoint

> This Package contain with modern css breakpionts

Latest version **1.0.4** (published 2019-12-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install modernscssbreakpoint
pnpm add modernscssbreakpoint
yarn add modernscssbreakpoint
bun add modernscssbreakpoint
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-12-16 |
| First published | 2019-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sumit |
| Maintainers | sumit3021kumar |

## Links

- npm: https://www.npmjs.com/package/modernscssbreakpoint
- Repository: https://github.com/sumit3021kumar/modernscssbreakpoint
- Homepage: https://github.com/sumit3021kumar/modernscssbreakpoint#readme
- Issues: https://github.com/sumit3021kumar/modernscssbreakpoint/issues
- npm.io page: https://npm.io/package/modernscssbreakpoint

## Dependencies (1)

- [flickity](https://npm.io/package/flickity.md) ^2.2.1

## Recent versions

- 1.0.4 (latest) — 2019-12-16
- 1.0.3 — 2019-12-11
- 1.0.2 — 2019-12-11
- 1.0.1 — 2019-12-11
- 1.0.0 — 2019-12-11

## README

`breakpoint()` is a [Sass](http://sass-lang.com/ "Sass - Syntactically Awesome
Stylesheets") mixin that helps you compose media queries in an elegant
way.

Here is a very basic example:

```scss
$breakpoints: (
    mobile:  320px,
    tablet:  740px,
    desktop: 980px,
    wide:    1300px
);

@import 'breakpoint';

.test {
    @include breakpoint($from: mobile, $until: tablet) {
        background: red;
    }
    @include breakpoint($from: tablet) {
        background: green;
    }
}
```

Compiles to:

```css
@media (min-width: 20em) and (max-width: 46.24em) {
  .test {
    background: red;
  }
}
@media (min-width: 46.25em) {
  .test {
    background: green;
  }
}
```

---
_Source: https://npm.io/package/modernscssbreakpoint · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._