gulp-sass-extend-shorthand

A gulp-replace wrapper to add a syntactic sugar shorthand syntax for writing @extend at-rules in Sass. (Note, this currently only works with the SCSS syntax).

Syntax

Basic Syntax

// shorthand
.myClass {
  .myMixin;
}

// is expanded to
.myClass {
  @extend .myMixin;
}

Placeholder Mixins

// shorthand
.myClass {
  %myPlaceholderMixin;
}

// is expanded to
.myClass {
  @extend %myPlaceholderMixin;
}

Inline List Syntax

// shorthand
.myClass {
  .mixinA, .mixinB, .mixinC;
}

// is expanded to
.myClass {
  @extend .mixinA;
  @extend .mixinB;
  @extend .mixinC;
}

Stacked List Syntax

// shorthand
.myClass {
  .mixinA,
  .mixinB,
  .mixinC;
}

// is expanded to
.myClass {
  @extend .mixinA;
  @extend .mixinB;
  @extend .mixinC;
}

Using !optional

// shorthand
.myClass {
  .mixinA, .mixinB !optional;
  .mixinC;
}

// is expanded to
.myClass {
  @extend .mixinA !optional;
  @extend .mixinB !optional;
  @extend .mixinC;
}

Usage

Pipe SCSS files through gulp-sass-extend-shorthand before piping to a compiler:

const { src, dest } = require('gulp')
const sass = require('gulp-sass')
const sassExtendShorthand = require('gulp-sass-extend-shorthand')

function sassCompile() {
  return src([
    'src/scss/**/*.+(scss|css)',
    '!**/_*.*'
  ]).pipe( sassExtendShorthand() )
    .pipe( sass() )
    .pipe( dest('dist/css') )
}