Gulp CSS在构建过程中分离字体速记的方式？

Question

是否有构建过程将css字体解析为其独立部分？

所以

font:500 3em/1.2 Arial, sans-serif;

到

font-weight: 500;
font-size: 3em;
line-height: 1.2;
font-family: Arial, sans-serif;

Answer 1

CSS本身不进行解析。有内置快捷方式，但它们是您可以使用的唯一快捷方式。你不能单独用CSS编写自己的文件。

如果你使用像SCSS这样的解析语言，你可以编写自己的函数来为你做这些：

@mixin my_font_function($weight, $size, $height, $family) {
    font: {
        weight: $weight;
        size: $size;
        family: $family;
    }
    line-height: $height;
}

然后这个：

div.class{
    @include my_font_function(500, 3em, 1.2, "Arial, sans-serif");
}

会产生：

div.class {
    font-weight: 500;
    font-size: 3em;
    line-height: 1.2;
    font-family: Arial, sans-serif;
}

一旦编译完毕。