Skip to content

francoismassart/decimal-to-css-ascii

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

decimal-to-css-ascii

Tiny script to convert a decimal code to an ascii string... This could be used for the value of the css property content.

Install

npm install decimal-to-css-ascii

Usage

var codeToAscii = require('decimal-to-css-ascii');
console.log(codeToAscii(59392));

Use case

For some of my websites, I use the icon fonts generator Fontello... The zip archive that I can download from Fontello, comes with fonts files, css and config.json which describes the font I generated.

The generated css files look like:

...
.ico-music:before { content: '\e800'; }
...

That's nice..

But I'd like to use Sass variables instead of '\e800' because:

  • It is not really human friendly once you get to it in your css declarations
  • Adding/removing icons later in time could change the affected character ranges and break icons !

I want to generate a scss file defining Sass variables instead, something like:

...
// All icons variables from fontello are defined inside this file: `_ico-vars.scss`
$ico-music: '\e800';
...
...
// Another scss file
@import "ico_vars";
.some-btn:before { content: $ico-music; }
...

In order to do so, I use a script written in node that will parse the config.json file and export a scss file from it.

Here are few lines from config.json generated by Fontello:

  "glyphs": [
    {
      "uid": "a6fa1de9a1c1b0d9d58cc4cde6dcf17c",
      "css": "music",
      "code": 59392,
      "src": "custom_icons",
      "selected": true,
      "svg": {
        "path": "M857.1 (...) 125Z",
        "width": 857.1428571428571
      },
      "search": [
        "music",
        "note",
        "song",
        "sound"
      ]
    },

See the code property ? This is the value that must be converted into ascii value (from 59392 to \e800), and this is where I use decimal-to-css-ascii...

About

Tiny script to convert a decimal code to an ascii string... This could be used for the value of the css property "content".

Resources

Stars

Watchers

Forks

Packages

No packages published