Selector Prefix

selector-prefix.scss

//
// Selector-prefix
// =================================================

//
// @mixin selector-prefix([$prefix], [$propertie], [$values]);
// cria de maneira fácil @extend-Only Selectors, por exemplo: %fz-10px, %fz-20px, %fz-4em...
//
// uso: @include selector-prefix([$prefixo_dos_seletores], [$propriedade], [$valores]);
// exemplo: @include selector-prefix(mr, margin-right, 4px 10px 18px 1em);
// resultado: %mr-4px, %mr-10px, mr-18px e mr-1em.
//

@mixin selector-prefix($prefix, $propertie, $values) {

    @each $value in $values {
        // cria os @extend-Only Selectors
        %#{$prefix}-#{$value} {
            #{$propertie}: $value;
        }
    }

}