Generated by SassMeister.com.

input.scss

// ----
// Compass (v1.0.1)
// ----

// bemify
// https://gtihub.com/franzheidl/bemify
// Franz Heidl 2015
// MIT License



// CONFIG
// ======

// You can change the configuration here. To use your own config/variables file, just import your variables before using one of the mixins.

// Output combined state selectors like:
//    .block__element.is-active {}
// Set to false to output single, non-combined state modifiers:
//    .block__element--is-active {}
$combined-state-selectors: true !default;

// .block[separator]element:
$element-separator:        "_" !default;

// .block[separator]modifier:
$modifier-separator:       "-" !default;

// The default prefix for state modifier selectors, will be combined with $modifier-separator:
$state-prefix:             "" !default;




// MIXINS
// ======

@mixin block($name) {
  .#{$name} {
    @content;
  }
}


@mixin element($name) {
  @at-root {
    &#{$element-separator}#{$name} {
      @content;
    }
  }
}


@mixin modifier($name) {
  @at-root {
    &#{$modifier-separator}#{$name} {
      @content;
    }
  }
}


@mixin state($state, $prefix: $state-prefix) {
  @if $combined-state-selectors == true {
    @at-root {
      &.#{$prefix}-#{$state} {
        @content;
      }
    }
  }
  @else {
    @at-root {
      &#{$modifier-separator}#{$prefix}-#{$state} {
        @content;
      }
    }
  }
}




// ALIASES
// =======

@mixin component($name) {
  @include block($name) {
    @content;
  }
}

@mixin b($name) {
  @include block($name) {
    @content;
  }
}

@mixin e($name) {
  @include element($name) {
    @content;
  }
}

@mixin m($name) {
  @include state($name) {
    @content;
  }
}

@mixin subcomponent($name) {
  @include element($name) {
    @content;
  }
}

@mixin sub($name) {
  @include element($name) {
    @content;
  }
}





@include b('my-component') {
    font-size: 11px;
    @include e('my-element') {
    font-size: 11px;
        @include m('my-modifier') {
            font-size: 11px;
        }
    }
}

output.css

.my-component {
  font-size: 11px;
}
.my-component_my-element {
  font-size: 11px;
}
.my-component_my-element.-my-modifier {
  font-size: 11px;
}

settings.json

{
  "sass": {
    "compiler": "Ruby Sass/3.4.1",
    "extensions": {
      "Compass": "1.0.1"
    },
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}