Building breakpoints scss from .yml

Gulp task for building breakpoints to scss variable file based on breakpoints.yml easy and helpful.

To do this you need two new package in your packet.json.

add to packet.json:

"drupal-breakpoints-scss": "^1.1.1",
"gulp-rename": "^1.2.2",

Add task new task to gulp file and than you can use it in other task or run it separately by run this command:

gulp breakpoint

Add to gulp.js file:

// task for building breakpoint scss in variables
gulp.task('breakpoint', function () {
    return gulp.src(path.resolve(__dirname, 'devblog.breakpoints.yml'))
        .pipe(drupalBreakpoints.ymlToScss())
        .pipe(rename('_breakpoints.scss'))
        .pipe(gulp.dest('./scss/variables/'))
});

When you want to make breakpoints on some style use in scss exmple:

@media #{$Wide}  {
 
}


@media #{$Normal}  {

}

this is an example of THEME.breakpoints.yml :

THEME.default.all:
  label: All
  mediaQuery: 'all and (min-width: 0px)'
  weight: 0
  multipliers:
    - 1x
  status: true
  langcode: en
  group: stormtextil.default
THEME.default.narrow:
  label: Narrow
  mediaQuery: 'all and (min-width: 768px)'
  weight: 3
  multipliers:
    - 1x
  status: true
  langcode: en
  group: stormtextil.default
THEME.default.normal:
  label: Normal
  mediaQuery: 'all and (min-width: 1024px)'
  weight: 4
  multipliers:
    - 1x
  status: true
  langcode: en
  group: stormtextil.default
THEME.default.wide:
  label: Wide
  mediaQuery: 'all and (min-width: 1220px)'
  weight: 5
  multipliers:
    - 1x
  status: true
  langcode: en
  group: THEME.default