Drupal-breakpoints-scss

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

Install

npm install --save drupal-breakpoints-scss

What it does

Converts this:

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:

$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

const drupalBreakpoints = require('drupal-breakpoints-scss')

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

Options

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

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