Oombla DocsMenuoombla.com


The base template for exporting assets for Sass

The base template for Sass outputs a CSS class for each asset with style definitions that render the asset when the classname is called in HTML (i.e. in a website or web app). The style definitions are explicit in case there is any variation in the asset’s properties (e.g. different dimensions). The final output and download is a single CSS file, but each asset’s SVG code, minified SVG code and base64 code can be viewed in the preview manifest before downloading.

Here is the base template code:

<% data.map(item => { %>.asset-<%= item.name %> {
  display: inline-block;
  width: <%= item.width %>px;
  height: <%= item.height %>px;
  background: url("data:image/svg+xml,<%= item.svgMini %>") center no-repeat transparent;
  background-size: <%= item.width %>px <%= item.height %>px;
<% }) %>

This template can be optimized further if you know the input to be structured a certain way. Let’s take the open source Radix Icons from Modulz as an example. (The icons are available in Figma if you would like to make a copy of the icons for your own use. Though if you do this note that you will need to place all of the icons under a single frame in order to export them all at once. See Basic Operations for more.)

With the Radix icons, we know that each icon in the set is 15px by 15px and that they all can be classified as icons (i.e. no logos or detailed illustrations). With this knowledge, we could optimize the base Sass template like so:

.icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px;

<% data.map(item => { %>.icon-<%= item.name %> {
  background-image: url("data:image/svg+xml,<%= item.svgMini %>");
<% }) %>

First, we pull out the redundant properties, which in this case since each icon has the same dimensions includes width, height, and background size. (Note how this is include outside of the loop, we don’t want to write this CSS rule for each item, just once.) Then we loop through each asset and output the background-image URL using the item.svgMini property (see the note at the end of CSS Trick’s Probably Don’t Base64 SVG). Now we have a much more optimized file.

And then to use the icons would require the icon class plus whatever specific icon we wanted to use:

<span class="icon-gear icon"></span>

Base64 Only

If you just wanted the assets as base64 variables you could do something like this:

<% data.map(item => { %>
/* default width: <%= item.width %>, height: <%= item.height %> */
$<%= item.name %>: "<%= item.base64 %>";
<% }) %>