Very Useful Algorithm SASS

Hi. It won't be lengthy!⏰

Short introduction

I'm assuming you've run into a problem where you needed to include all your fonts in a css file and it was really repetitive and boring. So, I developed a SASS algorithm that will help you in such a situation. This is a very simple algorithm but still useful.

How to use

To use it properly you just have a folder where your fonts are separated by their names and each font has its own folder like this:

You can then paste this code into your SASS file:

$path-to-fonts: '../fonts';
$font-families: (
    'Font1': ((100, 'Thin'),
        (200, 'ExtraLight'),
        (300, 'Light'),
        (400, 'Regular'),
        (500, 'Medium'),
        (600, 'SemiBold'),
        (700, 'Bold'),
        (800, 'ExtraBold'),
        (900, 'Black')),
    'Font2': ((100, 'Thin'),
        (200, 'ExtraLight'),
        (300, 'Light'),
        (400, 'Regular'),
        (500, 'Medium'),
        (600, 'SemiBold'),
        (700, 'Bold'),
        (800, 'ExtraBold'),
        (900, 'Black')),
    'Font3': ((100, 'Thin'),
        (200, 'ExtraLight'),
        (300, 'Light'),
        (400, 'Regular'),
        (500, 'Medium'),
        (600, 'SemiBold'),
        (700, 'Bold'),
        (800, 'ExtraBold'),
        (900, 'Black'))
);

@each $font-family,
$weights in $font-families {
    @each $weight in $weights {
        $weight-number: nth($weight, 1);
        $weight-name: nth($weight, 2);

        @font-face {
            font-family: $font-family;
            font-style: normal;
            font-weight: $weight-number;
            src: url('#{$path-to-fonts}/#{$font-family}/#{$font-family}-#{$weight-name}.ttf') format('truetype');
        }
    }
}

Instead of font1, font2 and font3, you can manipulate this object as you wish and give your own font names, so instead of "Font1" give the name of your font, for example "Roboto". Also you can edit, add or remove font weights you have but use the pattern (WeightNumber, 'WeightName') for example (400, 'Regular')

You can change the path to your fonts, add or remove a font style by adding a new block of code, eg.

@font-face {
            font-family: $font-family;
            font-style: YourFontStyle;
            font-weight: $weight-number;
            src: url('#{$path-to-fonts}/#{$font-family}/#{$font-family}-#{$weight-name}Italic.ttf') format('truetype');
        }

Here 'YourFontStyle' can be normal, italic, oblique etc.

If you want to look at the full example and you can also copy the code from here. If you have any ideas it would be great if you contribute!

Blog

Very Useful Algorithm SASS

Nikita Dmitriev

Short introduction

How to use

Join Our Newsletter. No Spam, Only the good stuff.

Related