# drupal-breakpoints-scss

> Convert Drupal 8:s breakpoints (*.breakpoints.yml) to scss $variables.

Latest version **1.2.0** (published 2017-06-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install drupal-breakpoints-scss
pnpm add drupal-breakpoints-scss
yarn add drupal-breakpoints-scss
bun add drupal-breakpoints-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.2.0 |
| Published | 2017-06-16 |
| First published | 2015-12-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | Jens Lind |
| Maintainers | jenslind |

## Links

- npm: https://www.npmjs.com/package/drupal-breakpoints-scss
- Repository: https://github.com/jenslind/drupal-breakpoints-scss
- Homepage: https://github.com/jenslind/drupal-breakpoints-scss#readme
- Issues: https://github.com/jenslind/drupal-breakpoints-scss/issues
- npm.io page: https://npm.io/package/drupal-breakpoints-scss

## Dependencies (2)

- [yamljs](https://npm.io/package/yamljs.md) ^0.2.4
- [through2](https://npm.io/package/through2.md) ^2.0.0

## Recent versions

- 1.2.0 (latest) — 2017-06-16
- 1.1.1 — 2015-12-17
- 1.1.0 — 2015-12-05
- 1.0.0 — 2015-12-05

## README

# Drupal-breakpoints-scss

> Convert Drupal 8:s breakpoints (`*.breakpoints.yml`) to scss `$variables`.

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

## Install
```
npm install --save drupal-breakpoints-scss
```

## What it does
Converts this:
```yml
theme.small:
  label: breakpoint-small
  mediaQuery: 'all and (max-width: 500px)'
  weight: 1
  multipliers:
    - 1x

theme.medium:
  label: breakpoint-medium
  mediaQuery: 'all and (max-width: 700px)'
  weight: 1
  multipliers:
    - 1x
```
into this:
```scss
$breakpoint-small: all and (max-width: 500px);
$breakpoint-medium: all and (max-width: 700px);

// Or..

$drupal-breakpoints: (
  breakpoint-small: 'all and (max-width: 500px)',
  breakpoint-medium: 'all and (max-width: 700px)',
);
```

## Usage
```javascript
const drupalBreakpoints = require('drupal-breakpoints-scss')

drupalBreakpoints.read('./theme.breakpoints.yml', opts)
  .pipe(drupalBreakpoints.write('./scss/_breakpoints.scss'))
```

### Options
```javascript
var defaultOpts = {
  vars: true,  // Output breakpoints as vars
  map: false, // Output as a sass map
  mapName: 'drupal-breakpoints', // Name of the map
  varsPrefix: '' // Prefix vars
}
```

### Usage with gulp
```javascript
const gulp = require('gulp')
const rename = require('gulp-rename')
const drupalBreakpoints = require('drupal-breakpoints-scss')

gulp.task('task', function () {
  return gulp.src('./breakpoints.yml')
    .pipe(drupalBreakpoints.ymlToScss(opts))
    .pipe(rename('_breakpoints.scss'))
    .pipe(gulp.dest('./scss'))
})
```

### [Webpack](https://www.npmjs.com/package/@oddhill/drupal-breakpoints-scss-webpack-plugin)

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