Is there a way to generate a variables.less/scss like icomoon does?

[Deklin]

Is there a way to generate a variables.less/scss like icomoon does?

We use this for places where we need the code for the font, and prefer to use a variable vs hardcoding it.

Is this possible?

[fry2k]

This would be great. Right now I have a grunt task which parse the generated css file and writes a *.scss file. I use variables and also an array variant cause of a mixin. for example: $bde-icon-load: "\f112"; $bde-icon-log: "\f113"; $bde-icons: ( load: "\f112", log: "\f113" );

[ediblecode]

You can use a custom template to generate a custom output, with variables etc. See an example below where you can generate a SASS map of your icons:

Gruntfile.js

webfont: {
  icons: {
    template: "icons.tmpl.scss"
  }
}

icons.tmpl.scss - see https://lodash.com/docs/4.16.2#template

// Map of icon name to codepoint
$icons: (
<% _.forEach(glyphs, function(glyph, index) { %>
  ${ glyph }: "${ codepoints[index] }",<% }); %>
);

@mixin icon($icon) {
  $code: map-get($icons, $icon);
  content: unquote('\'\\#{ $code }\'');
}

// Generate BEM style selector for each icon
.icon {
  font-family: "${ fontFamilyName }";

  <% _.forEach(glyphs, function(glyph, index) { %>
  &--${ glyph }:before {
    @include icon(${ glyph });
  }
  <% }); %>
}

[fry2k]

thanks @ediblecode this solved my request :+1:

[jasedwards]

Is there a way to do one for scss and less? It appears you can generate both types of files at once but can only provide one template.

[scottyeck]

@jasedwards You should be able to use the customOutputs option for this.

[Deklin]

I was able to do this as well w/ customOuptuts. Working very well.

On Tue, Mar 7, 2017 at 11:06 AM, Scotty Eckenthal notifications@github.com wrote:

@jasedwards https://github.com/jasedwards You should be able to use the customOutputs option for this.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/sapegin/grunt-webfont/issues/348#issuecomment-284766253, or mute the thread https://github.com/notifications/unsubscribe-auth/ADN130UXQGwi4cbfSrwUP1MZZcUwxBi_ks5rjYBtgaJpZM4JiaqU .

[jasedwards]

ah ok. so that replaces my templates and dest from options right? Previously I was only doing less but have a need for both now.