非常有用的算法 SASS

如何使用

要正确使用它，您只需有一个文件夹，其中字体由其名称分隔，每种字体都有自己的文件夹，如下所示：

然后，您可以将此代码粘贴到 SASS 文件中：

$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 , and , you can manipulate this object as you wish and give your own font names, so instead of give the name of your font, for example . Also you can edit, add or remove font weights you have but use the pattern for example font1font2font3"Font1""Roboto"(WeightNumber, 'WeightName')(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 can be normal, italic, oblique etc.'YourFontStyle'

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!

标签：SASS,算法
来源：