Building breakpoints scss from .yml

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