Skip to content

Instantly share code, notes, and snippets.

@renzocastro
Created February 28, 2018 23:41
Show Gist options
  • Save renzocastro/2eaed84c816c838a20639aba21753a07 to your computer and use it in GitHub Desktop.
Save renzocastro/2eaed84c816c838a20639aba21753a07 to your computer and use it in GitHub Desktop.
mixin BEM on pugJS
-
function htmlEscape(str) {
return str
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/\//g, '&#x2F;');
};
/**
* @param {string} className
* @param {string|array} modifiers
* @return {array}
*/
function BEM(className, modifiers) {
var classes = [className];
if (modifiers !== undefined) {
if (typeof modifiers === 'string') {
modifiers = [modifiers];
}
classes = classes.concat(
modifiers
.filter(item => item !== '' && item !== undefined)
.map(item => classes[0] + '--' + item)
);
}
return classes;
}
mixin BEM(classname, modifiers)
div(class=BEM(classname, modifiers))&attributes(attributes)
block
// @use
+BEM('btn', 'primary') Enviar
// @output
// <div class="btn btn--primary">Enviar</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment