DEV Community

Cover image for Very Useful Algorithm SASS
Nikita Dmitriev
Nikita Dmitriev

Posted on

1

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:
folder
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');
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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');
        }
Enter fullscreen mode Exit fullscreen mode

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!

Image of Stellar post

How a Hackathon Win Led to My Startup Getting Funded

In this episode, you'll see:

  • The hackathon wins that sparked the journey.
  • The moment José and Joseph decided to go all-in.
  • Building a working prototype on Stellar.
  • Using the PassKeys feature of Soroban.
  • Getting funded via the Stellar Community Fund.

Watch the video 🎥

Top comments (0)

Image of Stellar post

Check out Episode 1: How a Hackathon Project Became a Web3 Startup 🚀

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay