SCSS content variables like Font Awesome

[jacobsvante]

I.e. something like this in the generated scss file:

$h-icon-var-arrow-down: "\f100";
$h-icon-var-arrow-left: "\f101";
$h-icon-var-arrow-right: "\f102";
$h-icon-var-arrow-up: "\f103";
$h-icon-var-close: "\f104";
...
.h-icon-arrow-down:before { content: $h-icon-var-arrow-down; }
.h-icon-arrow-left:before { content: $h-icon-var-arrow-left; }
.h-icon-arrow-right:before { content: $h-icon-var-arrow-right; }
.h-icon-arrow-up:before { content: $h-icon-var-arrow-up; }
.h-icon-close:before { content: $h-icon-var-arrow-close; }

[cfg]

You can do this with a custom template. For instance in my template I have:

// Variables just for the content value
<% @data[:glyphs].each_with_index do |name, index| %>
$font-bgr_icon-<%= name %>: "\<%= (61696+index).to_s(16) %>";<% end %>

Which results in SASS:

$font-bgr_icon-authors: "\f100";
$font-bgr_icon-comments-background: "\f101";
$font-bgr_icon-comments-count: "\f102";

[webinsation]

@cfg Thanks for the template code. However, when I tried it, something didn’t work on my system.

This code would go in a file "my-custom-template.yml" correct – with a link to it in fontcustom.yml?

Appreciate your help,
– Caleb

[cfg]

Sorry that the code I was using for an earlier verison. I've since upgraded to 1.3 and had to upgrade my templates to account for changes in variables. My directory structure is probably not ideal.

build_root/ # compass runs out of here
├── assets/ # fontcustom runs out of here
│   ├── font-vectors
│   │   ├── scss/css/html template files
│   │   └── svg files
│   └── fontcustom.yml
├── css/ # CSS generated by compass
├── scss/ # SASS files; used by compass, fontcustom
└── fonts/ # all fonts; used by compass, fontcustom

A snippet from one of my .scss template files (_bgr-font-variables.scss):

<%
# Some common variables that I've found useful

# the font name, including the hash. but with no extension
bgr_base_file_name = File.basename @manifest[:fonts].first, File.extname(@manifest[:fonts].first)

# re-define variables to make fontcustom updates easier
bgr_css_prefix = @options[:css_prefix]
bgr_css_selector = @options[:css_selector]

bgr_file_name = if @options[:preprocessor_path]
    File.join @options[:preprocessor_path], bgr_base_file_name
else
    bgr_base_file_name
end
%>

// extend-only definitions for every glyph
<% @glyphs.each do |name, value| %>
%<%= bgr_css_prefix + name.to_s %> { content: "\<%= value[:codepoint].to_s(16) %>"; }<% end %>

// SASS variables to use for content
<% @glyphs.each do |name, value| %>
$font-bgr_icon-<%= name.to_s %>: "\<%= value[:codepoint].to_s(16) %>";<% end %>

I run fontcustom out of the assets directory and my fontcustom.yml looks like:

font_name: bgr
css_prefix: icon-
# preprocessor_path: ""
autowidth: true
no_hash: true
debug: false
quiet: false

templates: [ _bgr-font-variables.scss ]

input:
 vectors: font-vectors

output:
 fonts: ../fonts
 css: ../sass
 preview: ../fonts

[kaizau]

@webinsation You'll want to save your custom template as a regular SCSS (just with a bit of ERB sprinkled in). Add this file to the input[:templates] directory and add the template's filename to the templates array:

input:
  vectors: foo
  templates: path/to/templates

templates: [ preview, custom.scss ] # name the scss file whatever you want

[endtwist]

Added in 1.3.4.