❤
npm
Sign UpSign In

drupal-breakpoints-scss

1.2.0 • Public • Published

Drupal-breakpoints-scss

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

js-standard-style

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

Readme

Keywords

none

Package Sidebar

Install

npm i drupal-breakpoints-scss

Repository

github.com/jenslind/drupal-breakpoints-scss

Homepage

github.com/jenslind/drupal-breakpoints-scss#readme

Weekly Downloads

52

Version

1.2.0

License

ISC

Last publish

Collaborators

  • jenslind
Try on RunKit
Report malware