# inline-mq-scss

> scss mixin for scss perverts

Latest version **1.0.0** (published 2021-05-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install inline-mq-scss
pnpm add inline-mq-scss
yarn add inline-mq-scss
bun add inline-mq-scss
```

## 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.0 |
| Published | 2021-05-14 |
| First published | 2021-05-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Anton Shibnev |
| Maintainers | shibnev_anton |

## Links

- npm: https://www.npmjs.com/package/inline-mq-scss
- Repository: https://github.com/shibnev/inline-mq-scss
- Homepage: https://github.com/shibnev/inline-mq-scss#readme
- Issues: https://github.com/shibnev/inline-mq-scss/issues
- npm.io page: https://npm.io/package/inline-mq-scss

## Recent versions

- 1.0.0 (latest) — 2021-05-14

## README

# inline-media-scss

scss mixin for scss perverts

### simple example

```
.test {
  @include _(
    (
      padding-top: (
        'mob': 32px,
        'md': 50px,
        'lg': 100px
      ),
      padding-bottom: (
        'mob': 45px,
        'xs': 50px,
        'lg': 100px,
      ),
      text-align: (
        'mob': center,
        'xs': left,
      ),
      position: relative,
      z-index: 10,
      display: flex,
      flex-direction: column,
      align-items: (
        'mob': center,
        'xs': flex-start,
      ),
    )
  );
}
```

compile to

```
.test {
  padding-top: 1.7777777778rem;
  padding-bottom: 2.5rem;
  text-align: center;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media only screen and (min-width: 600px) {
  .test {
    padding-bottom: 2.7777777778rem;
    text-align: left;
    align-items: flex-start;
  }
}

@media only screen and (min-width: 1280px) {
  .test {
    padding-top: 2.7777777778rem;
  }
}

@media only screen and (min-width: 2188px) {
  .test {
    padding-top: 5.5555555556rem;
    padding-bottom: 5.5555555556rem;
  }
}

```

---

### installation

- you can install from npm

```
  npm i inline-media-scss -D
```

- or you can just download repo

```
  git clone https://github.com/shibnev/inline-media-scss.git
```

and then import mixins

```
  @import 'inline-media'
```

---

### how to use

1. first you have to set up breakpoints in file config.scss. You can use any names for breakpoints and any values:

```
$breakpoints: (
  'mob': 0,
  'xs': 600px,
  'md': 1280px,
  'lg': 2188px,
);
```

If the value equals 0, then the style expression will not be wrapped in @media

2. If you need to subtract pixels in rem, set the main font-size in file config.scss.

```
$font-size: 18px;
```

If you don't want to subtract pixels in rem just indicate **$is-rem: false**

3. You can also specify min-width or max-width in @media. Also in config.scss file:

```
$min-max: 'min';
```

or

```
$min-max: 'max';
```

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