Блог

Я использую замечательный mixin, который превращает SASS в CSS, используя методологию BEM.

SASS:

 =e($name) 
    #{amp;}__#{$name}
        @content
        
=m($name) 
    #{amp;}--#{$name}
        @content


.hot // block
     e(item) // element
        margin: 0
     m(green) // modifier
        color: green
  

на выходе мы получаем CSS в соответствии с методологией BEM:

 .hot .hot__item {
  margin: 0;
}
.hot .hot--green {
  color: green;
}
  

Я перехожу на SCSS. Итак, мне нужно переписать существующий SASS mixin в тот же короткий SCSS mixin.

 @mixin el($name) {
  #{amp;}__#{$name} {
    @content
  }
}

@mixin mod($name) {
  #{amp;}--#{$name} {
    @content
  }
}

.hot {
    @include el(item) {
        margin: 0;
    }
    @include mod(green) {
        color: green;
    }
}
  

Но это не так лаконично, как было…

Как написать mixin в SCSS, чтобы к нему можно было получить доступ без @include?